vuex 中插件的编写案例解析

const myPlugin = store => {
 // 当 store 初始化后调用
 store.subscribe((mutation, state) => {
 // 每次 mutation 之后调用
 // mutation 的格式为 { type, payload }
 });
};

const store = new Vuex.Store({
 // ...
 plugins: [myPlugin]
});

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);
 });
 };
}

export default new Vuex.Store({
 modules: {
 ...
 },
 strict: true,
 plugins: process.NODE_ENV === 'production' "color: #ff0000">三、 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' "_blank" href="https://www.npmjs.com/package/vuex-persistedstate">. vuex-persistedstate


2. vuex-persist
总结
以上所述是小编给大家介绍的vuex 中插件的编写案例解析，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！