🌀 3-2. useStore() の基本と応用

✅ 要点まとめ

• useStore() は Composition API で Vuex ストアへアクセスするための関数。
• this.$store の代わり → const store = useStore();
• 基本：store.state, store.getters, store.dispatch, store.commit
• 応用：型定義を使った安全なストアアクセス（TypeScriptなら特に重要）。

🟢 基本：useStore() の使い方

<!-- ファイル名: Counter.vue -->
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup lang="ts">
// useStore をインポート
import { useStore } from 'vuex';
import { computed } from 'vue';

// ストアを取得
const store = useStore();

// state を computed で取得
const count = computed(() => store.state.count);

// actions（dispatch）を使用
const increment = () => {
  store.dispatch('increment');
};
</script>

🟡 応用：TypeScript で型安全にする

1️⃣ Vuex ストアがこう定義されている場合：

// ファイル名: store/index.ts
import { createStore } from 'vuex';

export interface State {
  count: number;
}

export const store = createStore<State>({
  state: {
    count: 0,
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  mutations: {
    setCount(state, payload: number) {
      state.count = payload;
    },
  },
  actions: {
    increment({ commit }) {
      commit('setCount', 1);
    },
  },
});

2️⃣ 型を使った useStore() の定義：

// ファイル名: store/types.ts
import { Store } from 'vuex';
import { State } from './index';

// 型付きの useStore
export type StoreType = Store<State>;

// ファイル名: store/useStore.ts
import { useStore as baseUseStore } from 'vuex';
import { StoreType } from './types';

// 型付きの useStore を定義
export function useStore(): StoreType {
  return baseUseStore();
}

3️⃣ コンポーネント側で型安全に使用：

<!-- ファイル名: Counter.vue -->
<script setup lang="ts">
// 型付き useStore をインポート
import { useStore } from '../store/useStore';
import { computed } from 'vue';

const store = useStore();

const count = computed(() => store.state.count);
const doubleCount = computed(() => store.getters.doubleCount);

const increment = () => {
  store.dispatch('increment');
};
</script>

🎯 使いどころとメリット（実践ポイント）