

例えばユニークな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]


CC BY-SA 3.0
2017-01-31T13:42:56.630
32289
2021-12-02T01:54:10.137
19526
question
javascript vue.js
vuexでのmutationsとactionsについて


> この判定をmutationで行なうべきか、actionで行なうべきか、それとも両方で行なうべきか、悩みます。

両方で行うのは避けたいですね。また、mutationが直接呼び出される可能性を考慮するならば、mutationに分岐処理を入れ、actionはただcommitするのみにした方が良いかなと思います。

他のコードがわからないので以下、推測を含むのですが、

例えば、状態をv-
forを利用したリストコンポーネントで表現するのであれば、`someList`に存在しないものはリストに存在しないので、`remove`の存在確認のチェックは不要かなと思います。

`someList`をユニークな値をキープしたい、commitは変更が反映されるものとするなら、lodashを利用して以下のコードで表現できます。

[code]

    mutations: {
      add(state, id) {
        state.someList = _.uniq(state.someList.push(id))
      },
    }
    
[/code]


CC BY-SA 3.0
2017-04-19T04:57:13.360
34115
2017-04-19T04:57:13.360
3177
32289
answer


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

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

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

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


CC BY-SA 4.0
2021-12-02T01:54:10.137
83910
2021-12-02T01:54:10.137
754
32289
answer