vuex 中插件的編寫案例

1、官方文檔

• 一、第一步

  const myPlugin = store => {
    // 當 store 初始化後調用
    store.subscribe((mutation, state) => {
      // 每次 mutation 以後調用
      // mutation 的格式爲 { type, payload }
    });
  };
  複製代碼

• 二、第二步

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

2、編寫一個打印日誌的插件

• 一、函數的書寫

  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' ? [] : [logger()]
  });
  複製代碼

3、vuex數據持久化

• 一、函數的書寫

  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));
      });
    };
  }
  複製代碼

• 二、使用

  export default new Vuex.Store({
    modules: {
      ...
    },
    strict: true,
    plugins: process.NODE_ENV === 'production' ? [vuexLocal()] : [logger(), vuexLocal()]
  });
  複製代碼

• 三、相似的第三方庫

  • 1.vuex-persistedstate
  • 2.vuex-persist