1. はじめに

Vuexを使用するなかで、「アクションはミューテーションをコミットするもの」という認識でactionsの引数に{ commit }と書いていました。
しかし、actionsの引数に取られている{ commit }が何なのか正確にわかっていなかったので調べてみました。

この記事では、{ commit }が何か説明します。

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

2. actionsの引数 { commit } の正体

調べてみると以下のことがわかりました。

actionsの引数はcontext オブジェクトを受け取ります。
context オブジェクトは以下のプロパティを持ちます。
つまり、{ commit } はcontext オブジェクトのcommit関数を分割代入を使用して記述したものです。

これを完全に理解するために、context オブジェクトと分割代入について調べたのでまとめていこうと思います。

{
  state,      // `store.state` と同じ or モジュール内にあれば現在のVuexモジュールのstate
  rootState,  // モジュール内からルートのstateにアクセスするために使用（ルートでは使われない）
  commit,     // `store.commit` と同じ。mutationsを呼ぶための関数。
  dispatch,   // `store.dispatch` と同じ。他のactionsを呼ぶための関数。
  getters,    // `store.getters` と同じ or モジュール内にあれば現在のVuexモジュールのgetter
  rootGetters // モジュール内からルートのgettersにアクセスするために使用（ルートでは使われない）
}

参考：

3. contextオブジェクト

Vuexのcontextオブジェクトは、actions内で利用できるオブジェクトで、Vuexのいくつかのプロパティやメソッドにアクセスできるものです。

context.commit を呼び出すことでミューテーションをコミットできる、
context.state や context.getters で、ステートやゲッターにアクセスできるということです。

action関数の第1引数にはこのcontextオブジェクトが渡されます。

例えば、以下のincrementActionでは、
context.commit('increment')を使用してミューテーションを呼び出しています。

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAction (context) {
      context.commit('increment')
    }
  }
})

上記は context オブジェクト全体を受け取る典型的な書き方ですが、contextオブジェクトは先述したように複数のプロパティを持っているため、必要なものだけを分割代入で取得することが多いです。

Vuex において引数としてcontextオブジェクトを受け取るのはactionsのみです。
mutationsは同期的にstateを直接変更するため、常に第1引数にstateを受け取り、
gettersは、ステートの値を計算・加工して取得するための関数なので、第1引数にstate、第2引数に他のgetters を受け取ります。

4. 分割代入を使う場合

上記の例を、分割代入を使用すると以下のようになります。
commitだけを使うときに、context.commitと書かずに済むのでこの書き方がよく使われるということです。

actions: {
  incrementAction ({ commit }) {
    commit('increment')
  }
}

分割代入とは
分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式のこと

分割代入の例

const user = { name:'Taro', age: 15, country: 'Japan' };
console.log(name); // ReferenceError: name is not defined
const { name } = user; // name を変数として取り出
console.log(name); // "Taro"

最後に

1つのことをアウトプットしようとしたことで、副次的にその他のわかっていなかったことに対しても理解を深めることができました。
調べてみると全く知らなかった知識を得られる機会になるので、小さな疑問も逃さず解消していきたいです。
最後までお読みいただきありがとうございました！