Vuexのプラグイン

Vuexが守るべきルール

1.アプリケーションレベルの状態は、単一storeオブジェクトに集中すべきである.mutationのコミットはステータスを変更する唯一の方法であり、このプロセスは同期されます.3.非同期ロジックはactionにカプセル化する必要があります.

プロジェクト構造

storeファイルが大きすぎる場合は、action、mutation、getterを個別のファイルに分割するだけです.
├── index.html ├── main.js├——api|└——...#抽出API要求├——components|├——App.vue │ └── … └── store ├── index.js#モジュールを組み立ててstoreの場所をエクスポートします.js#ルートレベルのaction├-mutations.js#ルートレベルのmutation└-modules├-cart.js#ショッピングカートモジュールjs#製品モジュール

Vuexプラグイン

Vuexプラグインは、storeを一意のパラメータとして受け入れる関数です.

1.プラグインの定義:

プラグインの使用storeを定義します.subscribe

const myPlugin=store => {
 store.subscribe((mutation,state) => {
  //mutation    { type,payload }
 })
}

2.プラグインの使用

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

プラグイン内でのmutationのコミット

mutationをコミットすることで、プラグインはstoreにデータソースを同期するために使用できます.

export default function createWebsocketPlugin(socket){
 return store => {
  socket.on('data',data => {
   store.commit('receiveData',data)
  })
  store.subscribe(mutation => {
   if(mutation.type==='UPDATE_DATA'){
    socket.emit('update',mutation.payload)
   }
  })
 }
}


const plugin=createWebsocketPlugin(socket){
 const store=new Vuex.Store({
  state,
  mutation,
  plugins:[plugin]
 })
}

プラグインは、前後のステータスを比較するためにステータスのスナップショットを取得する必要がある場合があります.この場合、ステータスを深くコピーする必要があります.

const myPluginWithSnapshot=store => {
 let prevState=_.cloneDeep(store.state)
 store.subscribe((mutation,state) => {
  let nextState=_.cloneDeep(state)
  //  preState nextState
  //    ，    mutation
  prevState=nextState
 })
}

スナップショットを生成するプラグインは、開発段階でのみ使用し、webpackまたはBrowserifyを使用して構築ツールに処理してもらう必要があります.

const store=new Vuex.Store({
 plugins:process.env.NODE_ENV !== 'production'?[myPluginWithSnapshot]:[]
})

上のプラグインはデフォルトで有効になります.リリース段階ではwebpackのDefinePluginまたはBrowserifyのenvifyを使用してプロセスを実行します.env.NODE_ENV !== ‘production’はfalse

ロガープラグイン内蔵

vue-devtoolsを使用している場合は、このプラグインVuexを使用しないで、一般的なデバッグのためにログプラグインを持参します.

import createLogger from 'vuex/dist/logger'

const store=new Vuex.Store({
 plugins:[createLogger()]
})

createLogger関数のいくつかの構成項目:

const logger=createLogger({
 collapsed:false, //       mutation
 filter(mutation,stateBefore,stateAfter){
  // mutation     ，     true  
  //  ,mutation  { type,payload }  
  return mutation.type!=="aBlacklistedMutation"
 },
 transformer(state){
  //           
  //  ，     d
  return state.subTree
 },
 mutationTransformer(mutation){
  //mutation  { type,payload }    
  return mutation.type
 },
 logger: console //   console  ，   console
})

ログプラグインは、直接使用することもできます.