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

🎈 WPでも公開中です
https://wp.me/pc9NHC-1k9

#vue #nuxt #プログラミング #エンジニア

前置き

みなさんは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')
   }
 }
})

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

submit(_, payload)

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

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

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

{
 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 }) {
   // 省略
 },
}

また、
仮に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>

受け取る時は
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)
   }
 },
}

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

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の方に変えていこうかと思ってます🍀

🎈 WPでも公開中です
https://wp.me/pc9NHC-1k9