vuex 中插件的编写案例

一、官方文档

• 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