【2章 続き】mutation / action に型をつける（TypeScriptで型安全にする）

🎯 要点まとめ

• mutation と action に「どんな引数を受け取るか」を型で明確にする
• 間違った名前・間違った引数を渡すとコンパイルエラーにできる
• 型を使うことで「バグを早期に防ぐ」「補完が効く」
• TypeScriptらしい強力な書き方（interfaceで型を定義）

🥕 たとえ：注文書を書く

mutationやactionは「お店の注文受付」。

でも「何を注文できるのか？」が書いてないと、勝手に「チョコレート」とか注文されて困る。

だから「注文票（型）」を書くことで、間違った注文を防ぐ。

📦 具体的なコード例

ファイル: store/types.ts

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

// MutationTypes: mutationの名前を文字列リテラル型で定義
export const MutationTypes = {
  Increment: 'increment',
  SetUserName: 'setUserName'
} as const;

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

🟠 mutationに型をつける（MutationPayloadsを使う）

// store/index.ts

import Vue from 'vue';
import Vuex, { StoreOptions, MutationTree, ActionTree } from 'vuex';
import { RootState, MutationTypes, MutationPayloads } from './types';

Vue.use(Vuex);

// Mutationの型付き実装
const mutations: MutationTree<RootState> = {
  // countを1増やす（引数なし）
  [MutationTypes.Increment](state) {
    state.count++;
  },

  // ユーザー名をセットする（引数: string）
  [MutationTypes.SetUserName](state, payload: MutationPayloads['setUserName']) {
    state.userName = payload;
  }
};

🟣 actionにも型をつける（commit時に型が効く）

const actions: ActionTree<RootState, RootState> = {
  async updateUserName({ commit }, name: string) {
    // commit時に型が効く！ → nameはstring型じゃないとエラー
    commit(MutationTypes.SetUserName, name);
  }
};