Vue.jsアプリでは、vuexを状態管理ストアとして使用して、vuexのプロパティの値を変更するだけです。このために私は2つの方法に従うことができます:
action
メソッドをディスパッチすると、mutation
がさらにコミットされ、最終的に状態が変化します。
2番目の方法は、mutation
をコンポーネントから直接コミットすることで、mutationメソッドは状態を変更します。
現在、私は最初の方法を次のように使用しています:
コンポーネント内:
this.$store.dispatch('updateNotice', 'This is some notice')
アクション内:
updateNotice ({state, getters, commit}, payload) { commit('UPDATE_NOTICE', payload) }
ミューテーション:
UPDATE_NOTICE (state, payload) { state.notice = payload }
お気づきかもしれませんが、私はaction
メソッドを使用して、他のロジックやasync機能なしでsingleミューテーションをコミットしています。
私の質問は、この場合、コンポーネント自体から変異を直接コミットするべきではないのですか?ベストプラクティスは何ですか?この単純なケースでaction
メソッドを使用すると、冗長になり、特定の目的を果たしません。
コンポーネントから常にcommit
アクションを実行する必要がある理由はありますか?結局のところ、vuexでは...mapMutations()
が存在する理由がいくつかあります。
あなたの場合、...mapMutations
または$store
インスタンスを使用して、コンポーネントに直接変異をコミットすることは問題ありません。
ベストプラクティスを求めたので、アクションが存在する主な理由は非同期性です。変異は非同期ではありませんが、アクションは可能ですが、コンポーネントで$store.commit
を直接呼び出すことができますが、これは同期イベントになりますが、dispatch
を呼び出すと、アクションブロック内でコミットを非同期に処理できます。突然変異。
したがって、ベストプラクティスは、非同期で処理する必要がある場合にアクションを使用して状態への変更をコミットすることです。そのような場合は、状態の変更をコミットする前にAPI呼び出しを行う必要があると述べ、アクションを使用することをお勧めします。