4.5 mapState, mapActions, mapGetters, mapMutationsを活用する（発展編）

■ 要点まとめ（先に結論）

✅ 手動（store直叩き）もいいが、

✅ 大規模になると「map系関数を活用してまとめた方がスッキリする」。

つまり

👉 小規模なら4.4のやり方

👉 中〜大規模なら4.5のやり方

これがベストです！

■ そもそもmapStateとは？

Vuex公式にある「storeのデータをcomputedに自動展開するヘルパー関数」です。

例えばこれを：

computed: {
  text: () => store.state.sampleModule.text,
}

一発でこう書けるようにするのが mapState：

computed: {
  ...mapState('sampleModule', ['text']),
}

Composition APIでは、さらに進化してこう書けます。

■ Composition API版：mapState活用例

1. 必要な関数をインポートする