【2章】RootState の型を作る（TypeScriptで型安全なVuex）

🎯 要点まとめ

• RootState = Vuexの「state全体」の型
• これを作ることで、state や getters で補完が効く & 間違いを防げる
• Vuexに Store<RootState> と教えてあげる
• TypeScriptなら「何が入ってるか」を型で約束できる

🥕 たとえ：冷蔵庫に何が入ってるかの「在庫リスト」

Vuexのstateは冷蔵庫の中身。

「牛乳、卵、キャベツが入ってます」と書いたのが RootState。

書いてないもの（例えばチョコレート）は勝手に使えない。

📂 具体例（カウンターの型付きVuex）

ファイル構成（最小構成）

src/
├ store/
│ ├ index.ts  ← Vuex本体
│ └ types.ts  ← 型を書く

📌 types.ts に RootState の型を書く

// store/types.ts

// RootState: 全体のstateの型を定義
export interface RootState {
  count: number;          // カウント用の数字
  userName: string;       // ユーザー名
}

🏗️ index.ts で Vuex に型を教える

// store/index.ts

// VueとVuexをインポート
import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import { RootState } from './types'; // 型をインポート

Vue.use(Vuex);

// Storeのオプションに型を設定する
const storeOptions: StoreOptions<RootState> = {
  state: {
    count: 0,
    userName: 'Taro'
  },
  mutations: {
    // カウントを増やす
    increment(state) {
      state.count++;
    },
    // ユーザー名をセットする
    setUserName(state, name: string) {
      state.userName = name;
    }
  },
  getters: {
    // ユーザー情報を文字列で返す
    userInfo(state): string {
      return `${state.userName} (${state.count})`;
    }
  },
  actions: {
    // 非同期でユーザー名を変更する
    async updateUserName({ commit }, name: string) {
      await new Promise(resolve => setTimeout(resolve, 1000)); // 1秒待つ
      commit('setUserName', name);
    }
  }
};

// 型付きでStoreを作成
export const store = new Vuex.Store<RootState>(storeOptions);