了解です！

ではそのまま続けて 第3章 3.4 コード比較（Before / After） に入ります。

■ 第3章 3.4 コード比較（Before / After）

ここでは、これまでの変換を 一気に見比べられる形で整理 します。

クラス → Composition API（useStore）→ コンポーザル関数（useCounterStore.ts）

この3段階でどう変わったのかを確認します。

● 【1. クラスコンポーネントでの Vuex 利用（変換前）】

<template>
  <!-- 子にstateのcountを渡し、emitでmutationを呼び出す -->
  <ChildComponent :count="count" @increment="incrementCount" />
</template>

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

@Component({
  components: { ChildComponent },
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['increment']),
  },
})
export default class ParentComponent extends Vue {
  // mutation呼び出し
  incrementCount() {
    this.increment();
  }
  increment!: () => void;
  get count(): number {
    return 0; // mapStateで上書きされる
  }
}
</script>

● 【2. Composition API での Vuex 利用（useStore）】

<template>
  <ChildComponent :count="count" @increment="incrementCount" />
</template>

<script lang="ts" setup>
// 必要なものをインポート
import { useStore } from 'vuex';
import { State } from '@/store';
import { computed } from 'vue';
import ChildComponent from './ChildComponent.vue';

// ストアインスタンス取得
const store = useStore<State>();

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

// commitでmutation呼び出し
function incrementCount() {
  store.commit('increment');
}
</script>

● 【3. コンポーザル関数を使った Vuex 利用（useCounterStore.ts）】

<template>
  <ChildComponent :count="count" @increment="increment" />
</template>

<script lang="ts" setup>
// useCounterStoreから必要なものを取得
import { useCounterStore } from '@/composables/useCounterStore';
import ChildComponent from './ChildComponent.vue';

// composable関数でstateとmutationを取得
const { count, increment } = useCounterStore();
</script>

✔ 【3パターン比較表】