一、官方文档
-
1、第一步
const myPlugin = store => {// 当 store 初始化后调用store.subscribe((mutation, state) => {// 每次 mutation 之后调用// mutation 的格式为 { type, payload }}); }; 复制代码
-
2、第二步
const store = new Vuex.Store({// ...plugins: [myPlugin] }); 复制代码
二、编写一个打印日志的插件
-
1、函数的书写
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数据持久化
-
1、函数的书写
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、类似的第三方库
- 1.vuex-persistedstate
- 2.vuex-persist