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