【第5章 続き】

🟠 mutation / action ごとの payload 型定義パターン（Vuex × TypeScript 完全型安全設計）

🎯 要点まとめ

• 「どの mutation / action に、どんな payload を渡すべきか？」 を型で定義する
• 間違ったpayloadを渡したら、その場でエラーにできる
• TypeScriptの Mapped Types ([K in keyof T]: U) を活用するパターン
• 大規模開発・チーム開発では必須級の設計パターン

🥕 たとえ：メニューと注文内容のセットリスト

「3番ピザ」には「枚数」が必要。

「4番パスタ」には「ソースの種類」が必要。

→ 注文内容（payload）はメニュー（type）ごとに違う。

→ セットリストで間違いを防ぐ。

📦 基本設計（types.ts）

🟢 MutationType / ActionType の一覧

// mutation名（string literal型）
export const MutationTypes = {
  Increment: 'increment',
  SetUserName: 'setUserName'
} as const;
export type MutationType = typeof MutationTypes[keyof typeof MutationTypes];

// action名
export const ActionTypes = {
  UpdateUserName: 'updateUserName'
} as const;
export type ActionType = typeof ActionTypes[keyof typeof ActionTypes];

🟠 Mutationごとの payload 型

// mutationごとのpayloadを定義
export interface MutationPayloads {
  [MutationTypes.Increment]: undefined;         // incrementは引数なし
  [MutationTypes.SetUserName]: string;          // setUserNameはユーザー名（string）
}

🟣 Actionごとの payload 型