【第6章】moduleごとの state, mutations, actions, getters の型設計

（Vuex × TypeScript 完全型安全設計 / module構成版）

🎯 要点まとめ

• Vuexをmodule単位で分割する場合、それぞれに
  • state の型
  • mutations の型（payload含む）
  • actions の型（payload, 戻り値含む）
  • getters の型
• をしっかり設計して、module間の安全性・補完を保つ
• moduleの namespaced: true により、型も名前空間で分かれる設計

🥕 たとえ：部署ごとに注文票を作る

「営業部は見積もり作成」

「開発部はバグ修正依頼」

それぞれの部署でやること・必要な書類（payload）が違う。

→ 間違った書類を営業に出すと「これはうちの仕事じゃない！」ってなる。

それを防ぐための型設計。

📂 ディレクトリ構成（例）

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

🟢 例: user module の型設計（user.ts）

🟠 UserState

// modules/user.ts
export interface UserState {
  userName: string;
  isLoggedIn: boolean;
}

🟣 MutationTypes & payload

export const UserMutationTypes = {
  SetUserName: 'SetUserName'
} as const;

export type UserMutationType = typeof UserMutationTypes[keyof typeof UserMutationTypes];

export interface UserMutationPayloads {
  [UserMutationTypes.SetUserName]: string; // userName は string
}