了解です！

では 第1章 1.3「Vuexストア（state / mutation / action）」 を書いていきます。

ここでは、現在のクラスコンポーネント形式で使われているVuexストア（変換前） のコードを確認します。

【変換前】Vuexストア（state / mutation / action）

store/index.ts

// VueとVuexをインポート
import Vue from 'vue';
import Vuex from 'vuex';

// VuexをVueに登録
Vue.use(Vuex);

// ストアの型定義
export interface State {
  count: number;
}

// Vuexストアを作成してエクスポート
export default new Vuex.Store<State>({
  // ステートの初期値を定義
  state: {
    count: 0,
  },
  // ミューテーションを定義（状態を変える関数）
  mutations: {
    // countを1増やすミューテーション
    increment(state) {
      state.count += 1;
    },
  },
  // アクションを定義（非同期処理やロジックを書く場所）
  actions: {
    // incrementアクションはincrementミューテーションをコミットする
    increment({ commit }) {
      commit('increment');
    },
  },
  // 今回はgetterはなし（必要ならここに追加）
  getters: {},
});

【ポイント】このコードで使われている仕組み

機能 内容
state count: 0 で状態を持つ
mutations increment で state.count += 1
actions increment アクションが commit('increment')
getters 今回は未使用
型 State インターフェースで型を明確にしている

【補足】このVuexストアがどう使われるか？

親コンポーネントの中で

this.$store.commit('increment');

や

this.$store.dispatch('increment');

として呼び出すことができる。

このあと、第3章でこれを useStore() を使ったComposition API方式に変換していく予定です。

【次】1.4 今回変換する対象を整理する