vuex 中插件的編寫案例解析
更新時間：2019年06月10日 15:51:00 作者：水痕001
Vuex 的 store 接受 plugins 選項，這個選項暴露出每次 mutation 的鉤子。Vuex 插件就是一個函數(shù)，這篇文章主要介紹了vuex 中插件的編寫案例,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
一、官方文檔
1、第一步
const myPlugin = store => {
// 當(dāng) store 初始化后調(diào)用
store.subscribe((mutation, state) => {
// 每次 mutation 之后調(diào)用
// mutation 的格式為 { type, payload }
});
};
2、第二步
const store = new Vuex.Store({
// ...
plugins: [myPlugin]
});
二、編寫一個打印日志的插件
1、函數(shù)的書寫
import _ from 'lodash';
function logger() {
return function(store) {
let prevState = store.state;
store.subscribe((mutations, state) => {
console.log('prevState', prevState);
console.log(mutations);
console.log('currentState', state);
prevState = _.cloneDeep(state);
});
};
}
2、使用
export default new Vuex.Store({
modules: {
...
},
strict: true,
plugins: process.NODE_ENV === 'production' ? [] : [logger()]
});
三、 vuex 數(shù)據(jù)持久化
1、函數(shù)的書寫
function vuexLocal() {
return function(store) {
const local = JSON.parse(localStorage.getItem('myvuex')) || store.state;
store.replaceState(local);
store.subscribe((mutations, state) => {
const newLocal = _.cloneDeep(state);
sessionStorage.setItem('myvuex', JSON.stringify(newLocal));
});
};
}
2、使用
export default new Vuex.Store({
modules: {
...
},
strict: true,
plugins: process.NODE_ENV === 'production' ? [vuexLocal()] : [logger(), vuexLocal()]
});
3、類似的第三方庫
總結(jié)
以上所述是小編給大家介紹的vuex 中插件的編寫案例解析，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
在不久之前,看到一個比較有意思的小程序,就是靜神木魚,可以實現(xiàn)在線敲木魚,自動敲木魚,手盤佛珠,靜心頌缽的，下面就來揭秘如何實現(xiàn)這個小程序中敲木魚的累加向上漂浮動畫，需要的可以參考一下2022-11-11
這篇文章主要介紹了如何給vant的Calendar日歷組件添加備注，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇vuex管理狀態(tài) 刷新頁面保持不被清空的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
關(guān)于Element-UI Table 表格指定列添加點擊事件
這篇文章主要介紹了關(guān)于Element-UI Table 表格指定列添加點擊事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue +WebSocket + WaveSurferJS 實現(xiàn)H5聊天對話交互的實例
這篇文章主要介紹了Vue +WebSocket + WaveSurferJS 實現(xiàn)H5聊天對話交互的實例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-11-11
Vue首屏加載過慢出現(xiàn)長時間白屏的實現(xiàn)
本文主要介紹了Vue首屏加載過慢出現(xiàn)長時間白屏的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
對vue v-if v-else-if v-else 的簡單使用詳解
今天小編就為大家分享一篇對vue v-if v-else-if v-else 的簡單使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
基于Vue sessionStorage實現(xiàn)保留搜索框搜索內(nèi)容
這篇文章主要介紹了基于Vue sessionStorage實現(xiàn)保留搜索框搜索內(nèi)容,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了淺談vue中.vue文件解析流程,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue項目里面使用到的加密和解密的方法,本文主要介紹了vue中jsencrypt與base64加密解密的實用流程,具有一定的參考價值,感興趣的可以了解一下2023-10-10