Help us understand the problem. What is going on with this article?

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

きっかけ

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` と同じ。ただしモジュール内に限る
}


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


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引数:state
第2引数:getters

書式:ex_getter(state, getters)

  getters: {
    <!-- 第1引数:state のみ -->
    ex_getter: state => {
      return state.todos.filter(todo => todo.done)
    },

    <!-- 第1引数:state, 第2引数: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)

※詳しくはこちら
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:
 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

after666
ビタミン・ミネラルがたりない
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした