【第2章】型安全な Vuex Store の設計

🟢 今回のテーマ

→ 「RootStateの型定義」とは何か？ なぜ必要なのか？

🎯 要点まとめ

• RootState = Vuex の state 全体の「設計書（型）」
• 何が入っているか明示することで
  • 間違ったキーを防ぐ
  • 補完が効く
  • バグが減る
• 特に TypeScript では 型がないと state.xxx が any になってしまい、ミスに気づけない
• 大規模になるほど「型」が設計の柱になる

🥕 たとえ：冷蔵庫の中身リスト

冷蔵庫の中に「牛乳、卵、キャベツ」があると最初に決める。

「バナナください」と言われても「うちにはバナナはないです」と言える。

→ これが RootState の型。

📦 まず「型なし」で作った場合

const store = new Vuex.Store({
  state: {
    count: 0,
    userName: 'Taro'
  }
});

これだと：

store.state.counter; // ❌ ここ間違ってても気づかない（補完も出ない）

✅ 型を作る（RootState）

ファイル: store/types.ts