第2章：移行前のコード全体像

2.2 Vuexモジュールファイル（ネームスペース・getter・mutation・action・route利用あり）

ここでは、変換前のVuexモジュールファイルの構成と、具体的なコード例を示します。

このコードは、後の章でComposition APIスタイルに合わせて段階的にリファクタリングしていきます。

■ ファイル構成（例）

src/
├── store/
│   ├── modules/
│   │   └── sampleModule.ts
│   └── index.ts

■ sampleModule.ts（変換前）

// ファイル名: sampleModule.ts
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators';

interface RouteInfo {
  name: string;
  path: string;
}

@Module({ namespaced: true, name: 'sampleModule' })
export default class SampleModule extends VuexModule {
  // 状態管理する値
  public text: string = '初期テキスト';

  // 現在のルート情報も管理
  public currentRoute: RouteInfo = { name: '', path: '' };

  // Getter：textの長さを返す
  get textLength(): number {
    return this.text.length;
  }

  // Getter：現在のルート名を返す
  get currentRouteName(): string {
    return this.currentRoute.name;
  }

  // Mutation：textを書き換える
  @Mutation
  setText(newText: string) {
    this.text = newText;
  }

  // Mutation：現在のルート情報を更新する
  @Mutation
  setCurrentRoute(route: RouteInfo) {
    this.currentRoute = route;
  }

  // Action：textを書き換えるロジック
  @Action
  async updateText(newText: string) {
    this.context.commit('setText', newText);
  }

  // Action：ルート変更を反映する
  @Action
  updateRoute(route: any) {
    const routeInfo: RouteInfo = {
      name: route.name || '',
      path: route.path || '',
    };
    this.context.commit('setCurrentRoute', routeInfo);
  }
}

■ index.ts（変換前）

// ファイル名: index.ts
import Vue from 'vue';
import Vuex from 'vuex';
import SampleModule from './modules/sampleModule';

Vue.use(Vuex);

// Vuexストアを作成
export default new Vuex.Store({
  modules: {
    sampleModule: SampleModule,
  },
});

■ このコードで注目すべきポイント

✅ ここではVuexモジュール内でルート情報も一緒に管理していることがポイントです。