ミューテーション

Vuex のミューテーションは基本的にイベントです。各ミューテーションは名前とハンドラを持ちます。ハンドラ関数は常に全体のステートツリーを第1引数として取得します:

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    INCREMENT (state) {
      // 変異するステート
      state.count++
    }
  }
})

ミューテーション名に対して全て大文字を使用するのは、容易にアクションと区別できるようにするための規則です。

直接ミューテーションハンドラ呼び出すことはできません。ここでのオプションは、よりイベント登録のようなものです。"INCREMENT イベントがディスパッチされるとき、このハンドラは呼ばれます。"ミューテーションハンドラを起動するためには、ミューテーションイベントをディスパッチする必要があります:

store.dispatch('INCREMENT')

引数によるディスパッチ

引数に沿って渡すことも可能です:

// ...
mutations: {
  INCREMENT (state, n) {
    state.count += n
  }
}

store.dispatch('INCREMENT', 10)

ここの 10 は state に続く第2引数としてミューテーションハンドラに渡されます。任意の追加引数と同じです。これら引数は、特定のミューテーションに対してペイロードと呼ばれています。

Vue のリアクティブなルールに従うミューテーション

Vuex store のステートは Vue によってリアクティブになっているので、ステートを変異するとき、ステートを監視している Vue コンポーネントは自動的に更新されます。これはまた、Vuex のミューテーションは、純粋な Vue で動作しているとき、同じリアクティブな警告の対象となっているのを意味します:

前もって全て望まれるフィールドによって、あなたの store の初期ステートを初期化することを好みます
新しいプロパティをオブジェクトに追加するとき、いずれか必要です:
- Vue.set(obj, 'newProp', 123) を使用または -
- 全く新しいものでオブジェクトを置き換える。例えば、stage-2 の object spread syntax を使用して、このようにそれを書くことができます:
```
state.obj = { ...state.obj, newProp: 123 }
```