了解です！

では続けて 第3章 3.1 クラスでのVuex利用（mapState / mapMutationsなど） に入ります。

■ 第3章 3.1 クラスでのVuex利用（mapState / mapMutationsなど）

ここでは、クラスコンポーネントでの Vuex の使い方 を確認します。

「どう使っていたか」を整理することで、次の useStore() への書き換えが理解しやすくなります。

● 【変換前】クラスコンポーネントでの Vuex の使い方

✅ ParentComponent.vue (before)

<template>
  <!-- 子コンポーネントにVuexのstateを渡す -->
  <ChildComponent :count="count" @increment="incrementCount" />
</template>

<script lang="ts">
// Vue, Component, mapState, mapMutations をインポート
import Vue from 'vue';
import Component from 'vue-class-component';
import { mapState, mapMutations } from 'vuex';
// 子コンポーネントをインポート
import ChildComponent from './ChildComponent.vue';

@Component({
  components: {
    ChildComponent,
  },
  // computedでVuexのstateをマッピング
  computed: {
    ...mapState(['count']),
  },
  // methodsでVuexのmutationsをマッピング
  methods: {
    ...mapMutations(['increment']),
  },
})
// 親コンポーネントのクラス定義
export default class ParentComponent extends Vue {
  // 子からemitされたときにVuexのincrementを呼び出す
  incrementCount() {
    this.increment();
  }

  // mapMutationsで追加されるincrementの型宣言
  increment!: () => void;

  // mapStateで追加されるcountの型宣言
  get count(): number {
    return 0; // これはダミー、実際はmapStateで上書きされる
  }
}
</script>

✔ 【ポイント】クラス時代のVuexの使い方まとめ

機能 使い方
stateの取得 mapState(['count']) → this.count
mutationの呼び出し mapMutations(['increment']) → this.increment()
computed / methods の中で Vuex をマッピング オブジェクト展開 (...) でまとめて定義

🎯 【ここでの注意ポイント】