vuex 中插件的編寫案例解析
更新時間：2019年06月10日 15:51:00 作者：水痕001
Vuex 的 store 接受 plugins 選項，這個選項暴露出每次 mutation 的鉤子。Vuex 插件就是一個函數(shù)，這篇文章主要介紹了vuex 中插件的編寫案例,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
一、官方文檔
1、第一步
const myPlugin = store => {
// 當 store 初始化后調用
store.subscribe((mutation, state) => {
// 每次 mutation 之后調用
// 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、類似的第三方庫
總結
以上所述是小編給大家介紹的vuex 中插件的編寫案例解析，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
Vue 使用高德地圖添加點標記 + 點擊地圖獲取坐標 + 帶搜索(即地
這篇文章主要介紹了Vue 使用高德地圖添加點標記 + 點擊地圖獲取坐標 + 帶搜索(即地理編碼 + 逆地理編碼) 附完整示例,本文結合示例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-01-01
這篇文章主要給大家介紹了關于VUE中鼠標滾輪使div左右滾動的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要為大家介紹了Vue中$refs和$nextTick的使用方法，文中的示例代碼講解詳細，對我們學習Vue有一定幫助，需要的可以參考一下2022-03-03
這篇文章主要介紹了vue-cli 引入axios的方法,文中還給大家提到了vue-cli 配置axios的方法，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要介紹了基于vue實現(xiàn)微博三方登錄流程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
Vue3.2?新增指令?v-memo?用法詳解(提高性能利器)
v-memo 接受一個依賴的數(shù)組，依賴的數(shù)組變化，v-memo 所對應的 DOM 包括子集將會重新渲染，這篇文章主要介紹了Vue3.2?新增指令?v-memo?用法，提高性能的又一利器,需要的朋友可以參考下2022-09-09
本文通過實例代碼給大家介紹了vue生命周期和react生命周期對比 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
vue項目中的支付功能實現(xiàn)(微信支付和支付寶支付)
本文主要介紹了vue項目中的支付功能實現(xiàn)(微信支付和支付寶支付)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
keep-alive是vue中的內置組件,能在組件切換過程中將狀態(tài)保留在內存中,防止重復渲染DOM,本文給大家介紹vue中的keep-alive詳解與應用場景,感興趣的朋友一起看看吧2023-11-11
今天小編就為大家分享一篇在vue項目中引入高德地圖及其UI組件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09