🌀 3-1. mapState, mapGetters, mapActions, mapMutations の書き換え

✅ 要点まとめ

• クラスコンポーネントの @State, @Getter, @Action, @Mutation →

  Composition API ではすべて useStore() と computed や関数呼び出し で置き換える。

• this.$store → const store = useStore();

• this.count → computed(() => store.state.count)

🟥 変換パターン（具体例）

【クラスコンポーネント】

// ファイル名: Counter.vue (クラス版)
@Component
export default class Counter extends Vue {
  // mapState の代わり
  @State('count') count!: number;

  // mapGetters の代わり
  @Getter('doubleCount') doubleCount!: number;

  // mapActions の代わり
  @Action('increment') increment!: () => void;

  // mapMutations の代わり
  @Mutation('setCount') setCount!: (payload: number) => void;

  mounted() {
    this.increment();
  }
}

【Composition API (<script setup> 版)】

<!-- ファイル名: Counter.vue -->
<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup lang="ts">
// useStore で Vuex ストアを取得
import { useStore } from 'vuex';
import { computed, onMounted } from 'vue';

// 型がある場合は Store 型を import（省略可能）
const store = useStore();

// state を computed で取得
const count = computed(() => store.state.count);

// getters も computed で取得
const doubleCount = computed(() => store.getters.doubleCount);

// actions はそのまま関数呼び出し
const increment = () => {
  store.dispatch('increment');
};

// mutations も関数呼び出し
const setCount = (payload: number) => {
  store.commit('setCount', payload);
};

// ライフサイクルで action を呼び出し
onMounted(() => {
  increment();
});
</script>

🟡 変換表（まとめ）

🎯 イメージしやすい例え（t）

クラスコンポーネントは「ホテルのフロントに電話してお願いする」イメージ（this.$store）。

Composition API は「自分で冷蔵庫を開けて飲み物を取る」感じ（store.dispatch, computed で直接操作）。

次は「3-2. useStore() の基本と応用」に進めますか？