【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使用

<template>
 <div class="page">
  {{ hoge }}
 </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
 computed: {
  ...mapGetters(['hoge'])
 },
}
</script>

</div>

</template>

import { mapGetters } from 'vuex'

export default {

computed: {

...mapGetters(['hoge'])

}

</script>

コード: map未使用

<template>
 <div class="page">
   <p>{{ hoge }}</p>
 </div>
</template>

<script>
export default {
 computed: {
   hoge () {
     return this.$store.getters['hoge']
   },
 },
}
</script>

</div>

</template>

export default {

computed: {

hoge () {

return this.$store.getters['hoge']

}

</script>

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

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

⬆️の比較を見ると…👀

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

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

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

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

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

とはいえmapGettersはありかも！

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

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

コード：map使用

<script>
export default {
 computed: {
    ...mapGetters([
      'hoge1',
      'hoge2'
   ]),
 },
}
</script>

export default {

computed: {

...mapGetters([

'hoge1',

'hoge2'

]),

}

</script>

コード：map未使用

<script>
export default {
 computed: {
   hoge1 () {
     return this.$store.getters['hoge1']
   },
   hoge2 () {
     return this.$store.getters['hoge2']
   },
 },
}
</script>

export default {

computed: {

hoge1 () {

return this.$store.getters['hoge1']

hoge2 () {

return this.$store.getters['hoge2']

}

</script>

mapStateはほとんど使わない

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

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

まとめ

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

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

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

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