4.4 mapStateやmapActionsを使わずに手動で書き換える（基本編）

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

✅ mapState / mapGetters / mapActions / mapMutations を使わない。

✅ storeオブジェクトに直接アクセスして、state/getter/actionを取得・実行する。

✅ Composition APIスタイルならこれがシンプルで分かりやすい。

■ まず背景（なぜ？）

Vue2のOptions API時代では：

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

みたいに、map系関数でゴチャゴチャしていました。

しかし、Composition APIなら：

👉 直接 store を叩いた方が自然でシンプルです！

■ 基本のパターン

やりたいこと 書き方（Composition API）
stateの値を読む store.state.[モジュール名].[state名]
getterを読む store.getters['モジュール名/getter名']
actionを呼ぶ store.dispatch('モジュール名/action名', payload)
mutationを呼ぶ store.commit('モジュール名/mutation名', payload)

■ 具体例：手動で書き換え

1. まず、storeをインポート

import store from '@/store';
import { computed } from 'vue';