【第3章 続き】module構成でも使える useStore の汎用化パターン

🎯 要点まとめ

• Vuex を module で分割すると state, mutations, actions も moduleごとに分かれる
• useStore() をそのまま使うと root の型しかわからない → moduleごとの型が効かない
• → そこで moduleごとに useXXXStore()（例: useUserStore()） を作るパターンが安全
• 大規模アプリほど必須級の設計

🥕 たとえ：部署ごとに担当者が違う

会社全体でひとつの電話番号（root store）だけだと、

「どの部署にかけたらいいかわからない」。

→ 部署ごとに「営業部直通」「開発部直通」の電話番号（useUserStore, useCartStore）を作る。

→ 誰に何を頼んでいるかが明確になる。

📂 例：moduleごとの構成

src/
├ store/
│ ├ index.ts         ← ルートStore
│ ├ types.ts         ← ルートの型
│ ├ modules/
│ │   ├ user.ts      ← user module
│ │   └ cart.ts      ← cart module
│ ├ composables/
│ │   └ useUserStore.ts ← user module用 useStore

🟢 module: user.ts

// store/modules/user.ts

import { Module } from 'vuex';
import { RootState } from '../types';

// user moduleのstate型
export interface UserState {
  userName: string;
  isLoggedIn: boolean;
}

export const user: Module<UserState, RootState> = {
  namespaced: true,
  state: {
    userName: '',
    isLoggedIn: false
  },
  mutations: {
    setUserName(state, name: string) {
      state.userName = name;
    }
  },
  actions: {
    login({ commit }, name: string) {
      commit('setUserName', name);
    }
  }
};

📦 ルート store: index.ts

import Vue from 'vue';
import Vuex from 'vuex';
import { RootState } from './types';
import { user } from './modules/user';

Vue.use(Vuex);

export const store = new Vuex.Store<RootState>({
  modules: {
    user
  }
});