了解です！

では続けて 第3章 3.2 Composition APIでのVuex利用（useStore） に進みます。

■ 第3章 3.2 Composition APIでのVuex利用（useStore）

ここでは、先ほどのクラスコンポーネントでの

this.count
this.increment()

という Vuexの使い方 を、

Composition API（useStore()）でどう書き換えるのかを具体的に説明します。

● 【変換前】クラスコンポーネントでの Vuex 利用（おさらい）

// computedの中
...mapState(['count'])

// methodsの中
...mapMutations(['increment'])

// 使用
this.count            // state の count
this.increment()      // mutation の increment

● 【変換後】Composition API + useStore での書き方

✅ ParentComponent.vue (after)

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

<script lang="ts" setup>
// useStoreをインポート
import { useStore } from 'vuex';
// 型安全のためState型もインポート
import { State } from '@/store';
// reactiveなローカルstateを用意（必要なら）
import { computed } from 'vue';
// 子コンポーネントをインポート
import ChildComponent from './ChildComponent.vue';

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

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

// Vuexのmutation(increment)を呼び出す関数
function incrementCount() {
  store.commit('increment');
}
</script>

✔ 【変換前 / 変換後の違いまとめ】

🎯 【なぜこうするのか？】