web-dev-qa-db-ja.com

Vuex:アクションをスキップし、コンポーネントから直接変異をコミットする

Vue.jsアプリでは、vuexを状態管理ストアとして使用して、vuexのプロパティの値を変更するだけです。このために私は2つの方法に従うことができます:

  1. actionメソッドをディスパッチすると、mutationがさらにコミットされ、最終的に状態が変化します。

  2. 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()が存在する理由がいくつかあります。

18
Faisal Khurshid

あなたの場合、...mapMutationsまたは$storeインスタンスを使用して、コンポーネントに直接変異をコミットすることは問題ありません。

ベストプラクティスを求めたので、アクションが存在する主な理由は非同期性です。変異は非同期ではありませんが、アクションは可能ですが、コンポーネントで$store.commitを直接呼び出すことができますが、これは同期イベントになりますが、dispatchを呼び出すと、アクションブロック内でコミットを非同期に処理できます。突然変異。

したがって、ベストプラクティスは、非同期で処理する必要がある場合にアクションを使用して状態への変更をコミットすることです。そのような場合は、状態の変更をコミットする前にAPI呼び出しを行う必要があると述べ、アクションを使用することをお勧めします。

18
Vishnu Nair