state の内容を更新する専用のメソッド群。

内容は値そのものを変形させたりとか、単に設定したりとか、何か更新ロジックを含んでる場合もある

このように作る、第一引数に state を取り、第二引数に更新のためにパラメータを取る。

var store = new Vuex.Store({
    state: {
        hoge: 123
    },
    mutations: {
        updateHoge: function(state, v){
            state.hoge = v;
        }
    }
});

つまりこいつは、非常に単純な更新しかしないと言っているのと同じである。

複数の mutation をまとめた複雑な更新は Action 側の役割のようだ。

mutation は使う場合はやや特殊で必ず commit というメソッド経由でコールしなければならない

mutation 名を文字列として入力する

store.commit('updateHoge', 345);

getter は mutation 内から呼び出せない仕様になっている。 この仕様は自分は非常に変に見える。

値の個別管理をコンポーネントから引き離したのなら、データ上の対象のコンポーネントと対応する値を簡単に抽出できることとセットである。その抽出の仕組みが getter なのだったら、その条件であるキーと、更新値を渡すはずである。

しかし、キーがあっても getter が使えないので各 mutation に getter と同じ内容を実装するというアホなことになる。

これを回避するには mutation を使わず action を使うということになる。

mutation は commit メソッドによって JS の世界から分離した世界にあるので store にタッチする処理は commit の向こう側の世界で store を使い、その中のデータを抽出する必要がある。

そこで mutation を action 経由で呼び出すとこれが実現できる

action は store のほぼ全資産に context を通じてアクセスできるので、action でこのような関数を定義すればよい

function(ctx, v){
    ctx.commit("hogehogehoge", { getters: ctx.getters, v: v});
}

こうなる。ctx の commit によって mutation を呼び出してパラメータとなるオブジェクトを1個渡してやるのだが、 そこに getters を混ぜ込んでしまうということだ。

この問題は JSON 的オブジェクト構造から特定のデータを一発で抽出しにくいという構造にある。 一発で抽出できないのは、そのデータ構造に配列を含んでいるからである。

オブジェクトとして Key → Value の関係であれば key がわかっているのならば一発で引くことができる。 なのでこの問題における設計的解決とすると、配列的記述をしている部分をすべて連想配列的な記述に改めるということになる。

そのキーを画面描画用の各コンポーネントが保持しておけば getter は必要なく単なるオブジェクトのプロパティアクセスとして mutation を運用できることになる。