Vueと共通

【Nuxt.js】Nuxt文法編:Vuexのmapって結局なに??

前置き

Vuexの記事で
ちょこちょこ見かけるmap👀

でも…

もちろんmapを使うことなく
Vuexを使うことは可能だし🤔💭

メリットや使い道って
結局なんだろう…❓😵💦

ということで!

調べてまとめてみました🙋‍♀️

参考:
Vue.js の Vuex における mapGetters と、 this.$store.getters の使い分け
【Vuex】mapState, mapGetters, mapMutations, mapActionsの最低限の使い方まとめ
vue.jsの状態管理VuexがわかるmapState,mapMutationsなど

Vuex自体の記事も
過去に公開しているので
そちらもチェックしてみてください✅👀

⬇️ vuexのメリットはこちら
【Nuxt.js】Vuex基礎編:コードをスッキリさせよう

⬇️ vuexの使い方・書き方まとめ
【Nuxt.js】Vuexまとめ編:はじめる前に、簡単理解!


で、mapとは何ぞや?

vuexのそれぞれの役割を
コンポーネントにmapで呼び出すことが可能です。

  • mapState
  • mapGetters
  • mapMutations
  • mapActions

でもそれなら直接
this.$store.getters['hoge']とかで
呼び出せば良いですよね?💡🤔
わざわざmapを使う理由とは…❓


mapのメリット❤️

1番のメリットは
呼び出し方が簡単になること☝️🌟

store自体の書き方によって
省略の仕方も変わりますが、
いずれにしろコードが短くスッキリします。

コード: map使用

コード: map未使用


でも使用のオススメはしません😖💦

基本的にmapの使用は
あまりオススメしません❗️✋

⬆️の比較を見ると…👀

computedのすぐ後ろに
hogeが合った方が

「template内のhogeは
 gettersで取ってきてるな💡😀」

と分かりやすくありませんか?🧠✨

対するmap
先に何かをgettersで取ってきてて
それはhogeで、templateのここのhoge
と、理解するのに時間がかかりそうです🕰

(もしかしたら英語が得意な方は
こういう構造の方が分かるのかも…❓💭)


とはいえmapGettersはありかも!

ただgettersは複数使われることもあるし
this.$store.getters['**']
何回も書かないといけないなら
mapを使ってまとめて書いた方が楽💕
というシーンはありそうです!

逆にそこだけmap使うと分かりにくい!
ということもあり得るので
だったら使わなくても良いのでは…
とも思います🤔💭

コード:map使用

コード:map未使用


mapStateはほとんど使わない

そもそもmapを使わなくても
stateを直接呼び出すことはなく
gettersで呼び出すからです。
それぞれの役割を明確にしましょう😉🍒

その辺りは
アーキテクチャやMVVMを見てみると
良いかもしれません👀


まとめ

ざっくり言うと
コードを短くして楽できる😳💕
ですね!笑

ただ個人的には
「使いたいとは思えない」
という結論に至りました🤫

mapStateは使う場面がないし
というかgetters以外は
分かりにくいので使わなくても良いかな…と。
それでもgettersだけmapなのも変なので
全体の統一性を重視したいような。
用途はgettersを本当に使いまくる時に
限定されそうな気もします🌀

もしかしたらVuexよりも
mapの方が分かりやすい❗️🤭
という方もいるかもしれないので
チームによっては
採用するのもアリかもしれません💡

-Vueと共通
-,

© 2020 aLiz Nuxt