【第2章 続き】StoreOptions に型をつけて Store を作成する方法

🎯 要点まとめ

• StoreOptions<RootState> を使うことで、Vuexの state, getters, mutations, actions に型が適用される
• 特に state の中身が型安全になり、補完が効く
• MutationTypes / ActionTypes を使えば mutation / action 名も型で管理できる
• 大規模開発・チーム開発ではこの設計がほぼ必須

🥕 たとえ：レシピ通りに料理する

「材料リスト（state）」と「作り方（mutations, actions）」を

レシピ帳（型）にちゃんと書いておく。

→ 違う材料を使ったら怒られる（型チェック）。

→ 作り方を間違えたら怒られる（mutation名ミスも防ぐ）。

🏗️ 必要な準備

① RootState（stateの型）

② MutationTypes, ActionTypes, GetterTypes（名前の一覧）

③ MutationPayloads（mutationごとのpayload型）

📂 型の設計（store/types.ts）

// ① stateの型
export interface RootState {
  count: number;
  userName: string;
}

// ② mutation名
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型
export interface MutationPayloads {
  [MutationTypes.Increment]: undefined;            // incrementは引数なし
  [MutationTypes.SetUserName]: string;             // setUserNameはstring
}

🟢 StoreOptions に型をつける