【第3章】useStore の基本（型安全にVuexを使う最初の一歩）

🎯 要点まとめ

• Composition API では this.$store が使えない → setup() の中に this がないから
• その代わりに useStore() を使って store を取り出す
• でも useStore() だけだと型が any になる → 型付きの useStore を自作する
• 型がある useStore を使えば、state / getters / mutations / actions 全部で補完が効く！

🥕 たとえ：冷蔵庫（store）を「使いたい人にだけ配る」

家に大きな冷蔵庫（store）はあるけど、

「カレー作りたい人」には必要な材料だけ取り出して渡す。

→ それが useStore() の役割。

→ 必要な人だけ持ってるから、どこで何使ってるかがわかりやすい。

📦 まずはVuexの useStore() （素の形）

import { useStore } from 'vuex';

const store = useStore(); // ← ここが any 型（型が弱い）
store.state.count;        // ← 補完が出ない or 弱い

→ これだと 型安全じゃない。

だから useStore() に型を教える関数 を自分で作る。

🟢 型付き useStore の作成

store/useStore.ts

// 型を付けたuseStore関数を作成
import { useStore as baseUseStore } from 'vuex';
import { Store } from 'vuex';
import { RootState } from './types';

// 型付きのuseStore
export const useStore = (): Store<RootState> => {
  return baseUseStore<RootState>();
};