了解です！

では続けて 第5章 5.3 actionやgetter対応のコンポーザル関数実装 に進みます。

■ 第5章 5.3 actionやgetter対応のコンポーザル関数実装

ここでは、

🟢 【ストア側（actions / getters ありバージョン）】

// store/index.ts
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export interface State {
  count: number;
}

export default new Vuex.Store<State>({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count += 1;
    },
  },
  actions: {
    async increment({ commit }) {
      await new Promise((resolve) => setTimeout(resolve, 500)); // 擬似的な非同期処理
      commit('increment');
    },
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

✅ 【useCounterStore.ts（actions / getters対応版）】

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

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

// コンポーザル関数を定義
export const useCounterStore = () => {
  // useStoreでVuexインスタンスを取得
  const store = useStore<State>();

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

  // getter.doubleCountをcomputedで取得
  const doubleCount = computed(() => store.getters.doubleCount as number);

  // ミューテーションincrementをラップ
  const increment = () => {
    store.commit('increment');
  };

  // アクションincrement（非同期）をラップ
  const incrementAsync = async () => {
    await store.dispatch('increment');
  };

  // 必要なものを返す
  return {
    count,
    doubleCount,
    increment,
    incrementAsync,
  };
};

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

機能 書き方 理由
state取得 computed(() => store.state.count) 画面が自動更新される
getter取得 computed(() => store.getters.doubleCount) computedでリアクティブに扱える
mutation呼び出し store.commit('increment') → increment() 補完OK・タイポ防止
action呼び出し store.dispatch('increment') → incrementAsync() 非同期処理も関数で統一できる

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

<template>
  <div>
    <ChildComponent :count="count" @increment="increment" />
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

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

// コンポーザル関数から必要なものを取得
const { count, doubleCount, increment, incrementAsync } = useCounterStore();
</script>