アクションごとに突然変異を呼び出すVuex

Question

突然変異がコミットされるたびに何かをするプラグインを書くことができます。同様の機能を持つ方法はありますか？

私はあなたがvuexfire libraryのようなアクションを「強化する」ことができることに気付きました。これはこれを行う最良の方法ですか？

私の目標は、現在/未処理のajax呼び出しが現在保留中であるかどうかを追跡する方法を持ち、その番号に基づいて何らかの種類のアニメーションを自動的に表示することです。

編集：明らかにするために、Vuexだけを使用して追加のライブラリを使用せずにこれを行う方法があるかどうかは疑問です。

Answer 1

Vuex v2.5以降では、subscribeActionを呼び出して、ストア内の各ディスパッチアクションの後に呼び出されるコールバック関数を登録できます。

コールバックは、最初の引数と店舗のstate第二引数としてとしてaction記述子（typeと​​プロパティを持つオブジェクト）を受信します。

このドキュメントはVuex API Reference pageです。例えば

：

const store = new Vuex.Store({ 
 
    plugins: [(store) => { 
 
    store.subscribeAction((action, state) => { 
 
     console.log("Action Type: ", action.type) 
 
     console.log("Action Payload: ", action.payload) 
 
     console.log("Current State: ", state) 
 
    }) 
 
    }], 
 
    state: { 
 
    foo: 1 
 
    }, 
 
    mutations: { 
 
    INCREASE_FOO(state) { 
 
     state.foo++; 
 
    }, 
 
    }, 
 
    actions: { 
 
    increaseFoo({ commit }) { 
 
     commit('INCREASE_FOO'); 
 
    } 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    store, 
 
    methods: { 
 
    onClick() { 
 
     this.$store.dispatch('increaseFoo'); 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script> 
 

 
<div id="app"> 
 
    Foo state: {{ $store.state.foo }} 
 
    <button @click="onClick">Increase Foo</button> 
 
</div>