【第3章 続き】型を渡して補完を効かせる (useStore に型を渡す)

🎯 要点まとめ

• Vuex の useStore() はデフォルトだと any → 補完が効かない

• Store<RootState> のように型を渡す ことで、

  state, getters, mutations, actions の補完が全部効く

• 補完が効くことで「間違いにすぐ気づける」「安全に書ける」

🥕 たとえ：冷蔵庫に「何が入ってるかラベルを貼る」

ただ「冷蔵庫あります」だけだと中身はわからない。

「牛乳あります」「卵あります」と書いておけば取り間違えない。

型を渡す = 中身のラベルを書くこと。

📦 型付き useStore の基本形

store/useStore.ts

// 基本のvuex useStoreをインポート
import { useStore as baseUseStore } from 'vuex';
// Store型とRootState型をインポート
import { Store } from 'vuex';
import { RootState } from './types';

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

📌 ここで Store<RootState> を明示するのがポイント！

🟢 補完が効く使い方（Composition API）

<script lang="ts" setup>
// 型付きuseStoreを使う
import { useStore } from '@/store/useStore';

const store = useStore();

// 補完が効く！
const count = store.state.count;               // 補完あり！ number型
// store.state.counnt → ❌ タイポしたらエラーになる

store.commit('increment');                    // mutation名も補完される
// store.commit('incremnt'); → ❌ タイポも検知

store.dispatch('updateUserName', 'Hanako');    // actionも補完＆引数チェック

🟠 型を渡さないとどうなる？

import { useStore } from 'vuex'; // 型なし

const store = useStore();        // ← ここが any
store.state.count;               // 補完が出ない or any扱い
store.commit('increment');       // mutation名を間違えても気づかない