Vuexのミューテーションについて - とあるWeb屋の備忘録

ミューテーションはVuexのストアの状態を変更したいときに使うもので、分かりやすくいうとハンドラに近いものです。
使い方と特徴がいくつかあるので以下にまとめます。

ミューテーションはタイプとハンドラを持っています
ハンドラみたいなものなので直接使うことができません（公式ではハンドラに近い概念といっています）
タイプを指定してコミットすることでハンドラを使えます
ミューテーションのハンドラは第一引数にstateを渡して実際にstateの変更を行います
ミューテーションのハンドラは第二引数に追加の引数（payloadといいます）を渡すこともできます※payloadはオブジェクトで渡します
コンポーネント側でタイプを指定してコミットします
上に書いた第一引数と第二引数を無視して、第一引数にtypeプロパティを持つオブジェクトを渡してコミットすることもできます
ミューテーションハンドラでは非同期処理ができない

具体的に設定すると以下のような感じになります。

// ストア側
state: {
  hoge: 10
}
mutations: {
  aaa(state) {
    state.hoge + 100
  },
  bbb(state, payload) {
    state.hoge + payload.num // ここではnumはpayloadオブジェクトにセットした値のキーと仮定します
  }
}

コンポーネント側でコミットするには以下のように書きます。

// コンポーネント側
this.$store.commit('aaa') // これがミューテーションタイプを指定した普通のコミット

this.$store.commit('bbb', { // これがpayloadも渡す場合のコミット
  num: 100
})

this.$store.commit({ // これがtypeプロパティを持つオブジェクトを渡した場合のコミット
  type: 'bbb',
  num: 100
})

また、ステートとゲッターと同じく、コンポーネント側で上のように書いていても冗長なのでもっと短く書ける方法があります。
mapMutationsを使います。

設定方法は以下のようにします。

// コンポーネント側
import { mapMutations } from "vuex";

export default {
  methods: {
    ...mapMutations(["aaa"])
  }
}

スプレッド演算子を使うことでオブジェクトをマージできるので、他に設定したいmethodsがあったとしても問題ありません。
呼び出すときは以下の記述で書けます。実際仕事ではこっちを使うほうが多いと思います

this.$store.commit('aaa') // マップミューテーション使う前
this.aaa() // 使った後

また、仕事ではミューテーションに定数を使用していることも多いと思うので、以下の方法に慣れておくといいかもしれません。

定数を宣言するファイルを作成します
ファイルをstore側でインポートしてミューテーションのタイプに定数を使います
コンポーネント側ではタイプとして定数を指定してコミットします

例を出すとこんな感じです。

// mutation-type.js
export const AAA = 'AAA'

// ストア側
import { AAA } from './mutation-types' // 分割代入で必要な定数をインポートします

state: {
  hoge: 10
}
mutations: {
  [AAA](state) { // 定数はブラケット記法で書きます。この書き方はES2015のcomputed property nameです
    state.hoge + 100
  }
}

// コンポーネント側
import { mapMutations } from "vuex";

export default {
  methods: {
    ...mapMutations([AAA])
  }
}

this.AAA() // 使うとき

基本の使い方はこんな感じになります。
次回はアクションについて書いていきます。

ここまで読んでいただいてありがとうございました！！！

参考資料
ミューテーション | Vuex