[Vuex] mutations, actions, gettersの引数について

## きっかけ
Vuexでは`context`から`context.commit`などを実行できますが
contextはどこで使えて、第何引数に入るのかなどわからなかったため
調べてまとめようと思いました。

mutaitons, actionsの引数について、
公式ドキュメントを参考にしながらまとめていきます。

↓公式ドキュメント↓
https://vuex.vuejs.org/ja/api/#vuex-store


## state
引数を話題にしたいので割愛します。公式ドキュメントを見てください。

## mutations

`ストアにミューテーションを登録します。ハンドラ関数は第一引数に state を常に受け取り(モジュール内で定義されていれば、モジュールのローカルステートを受け取り)、指定されていれば第二引数に payload を受け取ります。`

第1引数：<b>state</b>
第2引数：<b>payload（普通の引数）</b>

書式：<b>ex_mutation(state, payload)</b>

```
mutations: {
  ex_mutation(state, payload) {
    処理
  }
}
```

## actions

`ストアにアクションを登録します。ハンドラ関数は次のプロパティを持つ context オブジェクトを受け取ります。`（後述します）
`そして、第 2 引数の payload があれば、それを受け取ります。`

第1引数：<b>context</b>
第2引数：<b>payload（普通の引数）</b>

書式：<b>ex_action(context, payload)</b>

```
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などで使用されます）

<br>

というわけで、vuexContextは、`actionsの中でのみ使えることがわかりました。`
そして、vuexContextは様々なオプションを持つらしいです。以下公式から抜粋です。

<br>

`ハンドラ関数は次のプロパティを持つ context オブジェクト`(vuexContext)`を受け取ります。`

```
{
  state,      // `store.state` と同じか、モジュール内にあればローカルステート
  rootState,  // `store.state` と同じ。ただしモジュール内に限る
  commit,     // `store.commit` と同じ
  dispatch,   // `store.dispatch` と同じ
  getters,    // `store.getters` と同じか、モジュール内にあればローカルゲッター
  rootGetters // `store.getters` と同じ。ただしモジュール内に限る
}
```

<br>

上記の上から３つ目の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`をよく使うかと思います）


<br>

```vue:store/index.js（Nuxt使ってる前提）
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引数：<b>state</b>
第2引数：<b>getters</b>

書式：<b>ex_getter(state, getters)</b>

```vue:
  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引数：<b>state</b>
第2引数：<b>getters</b>
第3引数：<b>rootState</b>
第4引数：<b>rootGetters</b>

書式：<b>mod_getter(state, getters, rootState, rootGetters)</b>

※詳しくはこちら
https://vuex.vuejs.org/ja/guide/modules.html#%E5%90%8D%E5%89%8D%E7%A9%BA%E9%96%93%E4%BB%98%E3%81%8D%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E3%81%A7%E3%81%AE%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E3%82%A2%E3%82%BB%E3%83%83%E3%83%88%E3%81%B8%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9


## まとめ
mutations：
　<b>ex_mutation(state, payload)</b>
actions：
　<b>ex_action(vuexContext, payload)</b>
getters：
　<b>ex_getter(state, getters)</b>【モジュール内ではない場合】
　<b>mod_getter(state, getters, rootState, rootGetters)</b>【モジュール内の場合】

## 余談

Vueで使えるオプション：
data(), methods, computed

Vuexで使えるオプション：
state, mutations, actions, getters