【Nuxt.js】Vuexのcontextと第二引数について

前置き

みなさんはVuexのactionsで
context部分を
どのように書いていますか

mutationsや他のactionsを
呼び出さない場合の話です

呼び出さない場合というのは
Firebaseなどに送信さえできればよい、
それだけで完結するものですね

また、第二引数以降に
複数の値を渡したい場合は
どうしていますか？

今回はその
第一引数contextと
第二引数に焦点を当てました

第一引数context

今までは
commitやdispatchを呼び出さない場合
こんな感じで書いていました

submit({ context }, payload)

実際、公式のサンプルコードでは
(context)となっています。
アクション

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

const store = new Vuex.Store({

state: {

mutations: {

increment (state) {

state.count++

}

actions: {

increment (context) {

context.commit('increment')

}

})

ただ、特に使うものがないのに
わざわざcontextを書く必要がないな〜
ということで最近はこうしてます

submit(_, payload)

私は上記の公式コードを見て
こう思っていました

絶対にcontextと
表記する必要があるものなんだ

しかしこちらを見てみると、
呼び出さない場合の指定は
特になさそう…
actions

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

{

state, // `store.state` と同じか、モジュール内にあればローカルステート

rootState, // `store.state` と同じ。ただしモジュール内に限る

commit, // `store.commit` と同じ

dispatch, // `store.dispatch` と同じ

getters, // `store.getters` と同じか、モジュール内にあればローカルゲッター

rootGetters // `store.getters` と同じ。ただしモジュール内に限る

}

ということで、

引数なので自由に名前をつけられる

ということが分かりました

わざわざ
「呼び出さない場合は自由です」
と明記されてはいませんが、
引数なんでね…
というわけです

これによって視認性もアップ
actionsをパッとみただけで
送信するactionsはこれだな
とすぐ分かります。

export const actions = {
  async submit(_, payload) {
    // 省略
  },
  async getData({ commit }) {
    // 省略
  },
}

export const actions = {

async submit(_, payload) {

// 省略

async getData({ commit }) {

// 省略

}

また、
仮にgetData(_)
になっていたら
命名的に普通は取得して
stateの上書きするのに
commitないよ？
などの間違いにも気づきやすくなります

第二引数

こちらも公式を確認すると…

そして、第 2 引数の payload があれば、それを受け取ります。
actions

引数は第二までしか渡せないということですね
(厳密に言うと第三引数も取れるのですが、
そこには別のデータが入っていたりします)
そしてこちらも命名は自由。
mutationsでも全く同じです。

では複数渡したい場合はどうするのか、
それはObjectにして
1つのまとまりにすればOK
{ プロパティ: 値, プロパティ: 値 }

<template>
  <form @submit.prevent>
    <input v-model="email" />
    <input v-model="name" />
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      name: '',
    }
  },
  methods: {
    submit(email, password) {
      this.$store.dispatch('submit', {
        email: this.email,
        name: this.name,
      })
    },
  },
}
</script>

</form>

</template>

export default {

data() {

return {

email: '',

}

methods: {

submit(email, password) {

this.$store.dispatch('submit', {

email: this.email,

})

}

</script>

受け取る時は
payloadでObjectの
1つのまとまりを受け取ります
submit(_, payload)

公式のままpayloadですが、
なんでもOKです

export const actions = {
  async submit(_, payload) {
    try {
      await this.$fire.database.ref().push().set({
        text: payload.email,
        name: payload.name
      })
    } catch (error) {
      console.log(error)
    }
  },
}

export const actions = {

async submit(_, payload) {

try {

await this.$fire.database.ref().push().set({

text: payload.email,

})

} catch (error) {

console.log(error)

}

もしくは
Objectで受け取ってもOK

export const actions = {
  async submit(_, { text, name }) {
    try {
      await this.$fire.database.ref().push().set({
        task,
        uid,
      })
    } catch (error) {
      console.log(error)
    }
  },
}

export const actions = {

async submit(_, { text, name }) {

try {

await this.$fire.database.ref().push().set({

task,

uid,

})

} catch (error) {

console.log(error)

}

まとめ

引数をシンプルにすることで
見やすくなりました
第一引数では
自分の思い込みではないかと
疑うことって大事だな〜
と感じました。

ちなみに_の書き方は
TSを導入している人が
結構使うらしいです。
TSの記事も書きたいなぁ…

第二引数は個人的に
payloadが好きだったのですが、
値を書く時に、
いちいち渡しているものを
確認しないといけないので、
Objectの方に変えていこうかと思ってます