【2章 続き】store の作成 (Vuex.Store<RootState>)

🎯 要点まとめ

• Vuex.Store<RootState> と書くことで、「このstoreのstateはRootState型だ」と教える
• これにより、state, getters, mutations, actions すべてに型チェックが入る
• 型があるから補完が効いて安全に使える

🥕 たとえ：冷蔵庫を「牛乳と卵だけ」と決めておく

もし冷蔵庫に「牛乳と卵がある」と書いたら、

他のもの（たとえばチョコレート）を入れようとすると怒られる。

これが 型をつける ということ。

📦 コード全体（1ファイルで完結する例）

ファイル: store/index.ts

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

// RootStateの型を定義（ここでは簡単なカウンター）
export interface RootState {
  count: number;              // カウント用の数字
  userName: string;           // ユーザー名
}

// VueにVuexをセット
Vue.use(Vuex);

// StoreオプションにRootStateを使う
const storeOptions: StoreOptions<RootState> = {
  // 1. state: データ本体（型はRootState）
  state: {
    count: 0,                 // 初期値 0
    userName: 'Taro'          // 初期ユーザー名
  },

  // 2. mutations: stateを変える（同期）
  mutations: {
    // countを1増やす
    increment(state) {
      state.count++;
    },
    // ユーザー名を変更する
    setUserName(state, name: string) {
      state.userName = name;
    }
  },

  // 3. getters: 計算した結果を返す
  getters: {
    // ユーザー情報を文字列で返す
    userInfo(state): string {
      return `${state.userName} (${state.count})`;
    }
  },

  // 4. actions: 非同期処理、mutationを呼ぶ
  actions: {
    // 1秒後にユーザー名をセットする
    async updateUserName({ commit }, name: string) {
      await new Promise(resolve => setTimeout(resolve, 1000)); // 1秒待つ
      commit('setUserName', name);                             // mutationを呼ぶ
    }
  }
};

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

✅ この時点で得られるメリット

• this.$store.state.count と書いた時点で補完が効く
• 間違って this.$store.state.counter と書くと エラーになる（counterなんてないよ！）
• mutationやgetterでも 型の恩恵がある

🟢 動作確認（使い方例）