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
締め括りをつける
以上述べたのは小编がみんなに绍介したvuexの中でプラグインの编纂の実例が解析するので、みんなに対してある程度助けがあることを望んで、もしみんなは私に伝言を歓迎するいかなる疑问があるならば、小编は直ちにみんなのに返答することができます！