5.3 正しい型定義と対応方法（useStoreを使わない場合）

■ 要点まとめ

✅ Vuexを直接importして、型をつけて使う。

✅ computed()でstate/getterを参照。

✅ store.dispatchでactionを実行。

✅ store自体に型をつける！

■ ファイル例

1. store.ts（型定義ファイル）

// ファイル名: src/types/store.ts

// ルート情報の型定義
export interface RouteInfo {
  name: string;
  path: string;
}

// sampleModuleのState型定義
//**currentRoute: RouteInfo は、オブジェクト型**　{ name: string; path: string }
export interface SampleModuleState {
  text: string;
  currentRoute: RouteInfo;
}

// ストア全体の型定義
export interface RootState {
  sampleModule: SampleModuleState;
}

これを具体的なオブジェクトに変換すると？

変換例

typescript
コピーする編集する
// ファイル名: src/example/rootStateExample.ts

// 具体的なRootStateオブジェクト
const rootStateExample: RootState = {
  sampleModule: {
    text: "サンプルテキスト",
    currentRoute: {
      name: "home",
      path: "/home"
    }
  }
};

2. storeインスタンス（型付き）

// ファイル名: src/store/index.ts

import Vue from 'vue';
import Vuex, { Store } from 'vuex';
import SampleModule from './modules/sampleModule';
import { RootState } from '@/types/store';

Vue.use(Vuex);

// RootState型を明示する（Vuexストア全体の設計図を RootState 型に合わせて作っています。）
const store = new Vuex.Store<RootState>({
  // モジュールとしてsampleModuleを登録。
  modules: {
    sampleModule: SampleModule,
  },
});

export default store;

ストアは「sampleModuleという名前のモジュール」を持つ構造になり、

そのモジュールの中に、textとcurrentRouteを持つ、というルールです。