きっかけ
Vuexではcontextからcontext.commitなどを実行できますが
contextはどこで使えて、第何引数に入るのかなどわからなかったため
調べてまとめようと思いました。
mutaitons, actionsの引数について、
公式ドキュメントを参考にしながらまとめていきます。
↓公式ドキュメント↓
https://vuex.vuejs.org/ja/api/#vuex-store
state
引数を話題にしたいので割愛します。公式ドキュメントを見てください。
mutations
ストアにミューテーションを登録します。ハンドラ関数は第一引数に state を常に受け取り(モジュール内で定義されていれば、モジュールのローカルステートを受け取り)、指定されていれば第二引数に payload を受け取ります。
第1引数：state
第2引数：payload（普通の引数）
書式：ex_mutation(state, payload)
mutations: {
ex_mutation(state, payload) {
処理
}
}
actions
ストアにアクションを登録します。ハンドラ関数は次のプロパティを持つ context オブジェクトを受け取ります。（後述します）
そして、第 2 引数の payload があれば、それを受け取ります。
第1引数：context
第2引数：payload（普通の引数）
書式：ex_action(context, payload)
acitons: {
ex_action(context, payload) {
処理
}
}
contextとは
※以降、上記で紹介したcontextはVuexのcontextという意味でvuexContextと表記させてもらいます。
というのも、Nuxt.jsでもcontextが独自で定義されており、それはvuexContextとは異なるものです。
ここでcontextと書いてしまうとVuexのcontextなのかNuxtのcontextなのかわからなくなる、と考えての対応です。
（余談ですがNuxt.jsのcontext は Nuxt から Vue コンポーネントへ追加のオブジェクト/パラメータを提供するもので、
nuxtServerInitやasyncDataなどで使用されます）
というわけで、vuexContextは、actionsの中でのみ使えることがわかりました。
そして、vuexContextは様々なオプションを持つらしいです。以下公式から抜粋です。
ハンドラ関数は次のプロパティを持つ context オブジェクト(vuexContext)を受け取ります。
{
state, // `store.state` と同じか、モジュール内にあればローカルステート
rootState, // `store.state` と同じ。ただしモジュール内に限る
commit, // `store.commit` と同じ
dispatch, // `store.dispatch` と同じ
getters, // `store.getters` と同じか、モジュール内にあればローカルゲッター
rootGetters // `store.getters` と同じ。ただしモジュール内に限る
}
上記の上から３つ目のcommitを例にとります。
actionsの中でvuexContext.commitとすると、それすなわちstore.commitと同じ、ということです。
そして、VueComponentの内部ではstoreはthis.$storeとして参照しますので、
vuexContext.commit ＝ store.commit ≒ this.$store.commitとなります。
（これちょっと例が悪かったですね。commitはVuexのactionsの中で参照するもので、Vueのcomponentの中で参照するものではないです。
VueComponent内だとthis.$store.dispatchをよく使うかと思います）
state: {
sentence: ""
}
mutations: {
<!-- 第1引数：state, 第2引数：payload -->
EX_MUTATION(state, payload) {
state.sentence = payload
}
}
actions: {
<!-- 第1引数：context(=vuexContext), 第2引数：payload -->
ex_action(vuexContext, payload) {
vuexContext.commit("EX_MUTATION", payload)
}
}
getters
ストアにゲッターを登録します. ゲッター関数は次の引数を受け取ります:
state, // モジュール内で定義されていればモジュールのローカルステート
getters // store.getters と同じ
第1引数：state
第2引数：getters
書式：ex_getter(state, getters)
getters: {
<!-- 第1引数：state のみ -->
ex_getter: state => {
return state.todos.filter(todo => todo.done)
},
<!-- 第1引数：state, 第２引数：getters -->
<!-- gettersに登録されているex_getterを呼び出せる -->
ex_getter_length: (state, getters) => {
return getters.ex_getter.length
}
}
※モジュールでgettersを使う場合
モジュールで定義されたときの仕様
state, // モジュールで定義された場合、モジュールのローカルステート
getters, // 現在のモジュールのモジュールのローカルゲッター
rootState, // グローバルステート
rootGetters // 全てのゲッター
第1引数：state
第2引数：getters
第3引数：rootState
第4引数：rootGetters
書式：mod_getter(state, getters, rootState, rootGetters)
まとめ
mutations：
ex_mutation(state, payload)
actions：
ex_action(vuexContext, payload)
getters：
ex_getter(state, getters)【モジュール内ではない場合】
mod_getter(state, getters, rootState, rootGetters)【モジュール内の場合】
余談
Vueで使えるオプション：
data(), methods, computed
Vuexで使えるオプション：
state, mutations, actions, getters