【第4章 続き】

🎯 state, getters, mutations, actions への具体的なアクセス例（Composition API + 型付き useStore）

🟢 要点まとめ

• Composition API では setup() の中で useStore() を呼ぶ

• 型付き useStore() を使えば

  state / getters / mutations / actions に安全にアクセスできる

• 型が効くから補完される・間違いを防げる！

🥕 たとえ：ラベル付きの冷蔵庫

卵 → state.count

スープ → getters.userInfo

「スープ足して！」 → commit('increment')

「1時間後にスープ作って！」 → dispatch('updateUserName', 'Hanako')

📦 例: 型付きVuexの準備（おさらい）

store/types.ts

// RootStateの型
export interface RootState {
  count: number;
  userName: string;
}

// mutation名
export const MutationTypes = {
  Increment: 'increment',
  SetUserName: 'setUserName'
} as const;

// action名
export const ActionTypes = {
  UpdateUserName: 'updateUserName'
} as const;

// mutationのpayload型
export interface MutationPayloads {
  [MutationTypes.Increment]: undefined;
  [MutationTypes.SetUserName]: string;
}

✅ useStore の定義

// store/useStore.ts
import { useStore as baseUseStore } from 'vuex';
import { Store } from 'vuex';
import { RootState } from './types';

export const useStore = (): Store<RootState> => {
  return baseUseStore<RootState>();
};

🎯 アクセス例（実践）

<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(); // 型付きstore

// ------------------------------
// 🟢 state にアクセスする
// ------------------------------
const count = store.state.count;               // ✅ number型補完OK
const userName = store.state.userName;         // ✅ string型補完OK

// ------------------------------
// 🔵 getters にアクセスする
// ------------------------------
const userInfo = store.getters.userInfo;       // ✅ gettersも補完OK

// ------------------------------
// 🟠 mutations にアクセスする
// ------------------------------
const increment = () => {
  store.commit('increment');                  // ✅ 'increment' の補完OK
};

// ------------------------------
// 🟣 actions にアクセスする（非同期OK）
// ------------------------------
const changeUserName = async () => {
  await store.dispatch('updateUserName', 'Hanako');  // ✅ 補完OK & 引数型チェック
  // store.dispatch('updateUserName', 123);          // ❌ stringじゃないとエラー
};
</script>