Vueと共通

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

前置き

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

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

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

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

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


第一引数context

今までは
commitdispatchを呼び出さない場合
こんな感じで書いていました✍️

submit({ context }, payload)

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

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

submit(_, payload)

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

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

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

ということで、

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

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

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

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

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


第二引数

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

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

actions

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

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

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

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

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


まとめ

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

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

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

-Vueと共通
-,

© 2021 aLiz Nuxt