vuexでのmutationsとactionsについて


例えばユニークなIDの配列を保持し追加削除する場合、既に追加されてるかどうかの判定が必要になります。この判定をmutationで行なうべきか、actionで行なうべきか、それとも両方で行なうべきか、悩みます。

mutationの処理が走る場合は必ず変更される方がいい気がします。そうするとactionでstateを見て必要ならばmutationの処理を走らすという流れにしたくなります。しかしvueではmutationの実行は一応はどこからでもできるのでactionのみに変更するかしないかの分岐を書くのも不安です。そもそも「commitする場合は必ず変更される」という考え方自体どうなのか。。。。

ご意見聞かせてください。

[code]

    state: {
        someList: [1,2,3],
    },
    mutations: {
        add(state, id){
            state.someList.push(id);
        },
        remove(state, id){
            state.someList.splice(state.someList.indexOf(id), 1);
        },
    },
    actions: {
        add({commit, state}, {id}){
            if ( state.someList.indexOf(id) < 0 ) {
                commit('add', id);
            }
        },
        remove({commit, state}, {id}){
            if ( state.someList.indexOf(id) >= 0 ) {
                commit('remove', id);
            }
        },
    }
    
[/code]




個人的には、以下の感じで実装するのが良いのではないか、と思います。

  1. state だけを考慮すれば良いような場合： mutation
  2. 非同期であるとか、他の mutation / action など state それ以外を触りたい場合 => action

Vuex は、アプリケーションのグローバルな状態を表す state は、同期的に mutation
によって変更される、という性質を最大限活かそうとしているためのフレームワークなんじゃないか、と個人的には思います。  
例えば、 Vue.js Devtool を見ていても、 mutation と store
の状態の履歴を参照可能にしているなどから、そういった形でロジックを整理していくことが推奨されているように思います。

今回のケースで言えば、ロジックは同期的であって、かつ、他の store の要素を触る必要もない、基本的な state
変更ロジックを記述することが、やりたいことであると思われるので、このロジックを記述するのは mutation で良いのではないか、と個人的には思います。

