【第4章】Composition API の中で Vuex を使う

→ const store = useStore() で型付きアクセス

🎯 要点まとめ

• Composition API では this がない → this.$store も使えない
• useStore() を使って storeインスタンスを取り出す
• Store<RootState> 型を渡してある useStore を使えば state / getters / mutations / actions に型が効く
• これにより 補完が効いて、安全に開発できる

🥕 たとえ：自分専用の冷蔵庫を取り出す

家に冷蔵庫はひとつ（store）だけど、

使いたい人が「自分用に必要なものだけ持ってくる」のが useStore()。

→ 中に何があるか（型）もわかっている。

📂 型付き useStore の準備（おさらい）

store/useStore.ts

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

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

🟢 実際の使い方（Composition API内）

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>User Info: {{ userInfo }}</p>
    <button @click="increment">+1</button>
    <button @click="changeUserName">Change Name</button>
  </div>
</template>

<script lang="ts" setup>
// 型付きuseStoreをインポート
import { useStore } from '@/store/useStore';

const store = useStore(); // 型付きなので補完が効く！

// stateにアクセス（countはnumber型で補完OK）
const count = store.state.count;

// gettersも補完OK
const userInfo = store.getters.userInfo;

// mutationを呼ぶ（'increment'は型で補完される）
const increment = () => {
  store.commit('increment');
};

// actionも安全に呼べる（引数も型チェックされる）
const changeUserName = () => {
  store.dispatch('updateUserName', 'Hanako');
};
</script>

✅ 補完が効いているポイント