了解です！

では続けて 第5章 5.4 複数モジュール対応のコンポーザル関数設計 に進みます。

■ 第5章 5.4 複数モジュール対応のコンポーザル関数設計

ここでは、

Vuex で namespaced モジュールが複数ある場合に、

コンポーザル関数をどう設計するか？

安全でわかりやすく、ミスしない書き方を解説します。

🟢 【複数モジュール構成のおさらい】

// store/index.ts
import Vue from 'vue';
import Vuex from 'vuex';
import { counter } from './modules/counter';
import { user } from './modules/user';

Vue.use(Vuex);

export interface RootState {
  counter: CounterState;
  user: UserState;
}

export default new Vuex.Store<RootState>({
  modules: {
    counter,
    user,
  },
});

🟠 【モジュール例：counter.ts】

// store/modules/counter.ts
export interface CounterState {
  count: number;
}

export const counter = {
  namespaced: true,
  state: (): CounterState => ({
    count: 0,
  }),
  mutations: {
    increment(state: CounterState) {
      state.count += 1;
    },
  },
  getters: {
    doubleCount(state: CounterState) {
      return state.count * 2;
    },
  },
  actions: {
    async increment({ commit }) {
      await new Promise((resolve) => setTimeout(resolve, 500));
      commit('increment');
    },
  },
};

✅ 【複数モジュール対応の useCounterStore.ts の実装】

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

// useStoreと型をインポート
import { useStore } from 'vuex';
import { RootState } from '@/store';
import { computed } from 'vue';

// Counterモジュール専用のコンポーザル関数
export const useCounterStore = () => {
  const store = useStore<RootState>();

  // counterモジュールのstateを取得
  const count = computed(() => store.state.counter.count);

  // counterモジュールのgetterを取得
  const doubleCount = computed(() => store.getters['counter/doubleCount'] as number);

  // counterモジュールのmutation
  const increment = () => {
    store.commit('counter/increment');
  };

  // counterモジュールのaction
  const incrementAsync = async () => {
    await store.dispatch('counter/increment');
  };

  return {
    count,
    doubleCount,
    increment,
    incrementAsync,
  };
};

🟡 【設計ポイント】