了解です！

では続けて 第5章 5.2 useCounterStore.ts の実装例 に進みます。

■ 第5章 5.2 useCounterStore.ts の実装例

ここでは、実際に 「どうやってコンポーザル関数 (useCounterStore.ts) を作るか？」 を

コード付きで具体的に解説します。

🟢 【今回のストアのおさらい】

// store/index.ts
export interface State {
  count: number;
}

export default new Vuex.Store<State>({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count += 1;
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    },
  },
});

✅ 【useCounterStore.ts の実装】

ファイル名：src/composables/useCounterStore.ts

// VuexのuseStoreをインポート
import { useStore } from 'vuex';
// ストアのState型をインポート
import { State } from '@/store';
// computedをインポート
import { computed } from 'vue';

// カウント管理用のコンポーザル関数を定義
export const useCounterStore = () => {
  // ストアインスタンスを取得
  const store = useStore<State>();

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

  // incrementミューテーションを呼び出す関数
  const increment = () => {
    store.commit('increment');
  };

  // incrementアクション（非同期）が必要ならこちら
  const incrementAsync = () => {
    store.dispatch('increment');
  };

  // 必要なものを返す
  return {
    count,
    increment,
    incrementAsync, // 必要ない場合は削除してOK
  };
};

🟡 【この実装のポイント】

書き方 理由
useStore<State>() store の型安全を保証する
computed(() => store.state.count) 画面が自動で再描画される
increment() commit('increment') をラップして補完OK
incrementAsync() dispatch('increment') をラップして補完OK
return { ... } 必要な関数とstateだけを渡す → 利用側は楽

🎯 【利用側（親コンポーネント）のコード】

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

<script lang="ts" setup>
import { useCounterStore } from '@/composables/useCounterStore';
import ChildComponent from './ChildComponent.vue';

// storeからcountとincrementを取得
const { count, increment } = useCounterStore();
</script>