【3章】vuex-class デコレータを使う (@State, @Getter, @Mutation, @Action)

🎯 要点まとめ

• vuex-class はクラスコンポーネントで Vuex を簡単＆安全に使うためのライブラリ

• デコレータ（@State, @Getter, @Mutation, @Action）を使うことで、

  this.$store.xxx を書かずに、プロパティとして Vuex にアクセスできる

• TypeScript でも型チェックが効く（引数の型など）

🥕 たとえ：家族全員の冷蔵庫に「これ、うちの卵」ってラベル貼る

毎回「冷蔵庫の中から卵を取ってくる」って書くのは面倒。

「うちの冷蔵庫の卵」と名前を付けておけばすぐ使える。

それが @State('egg') public myEgg!: Egg; みたいな書き方。

📦 具体的なコード例（vuex-class の使い方）

① インストール

npm install vuex-class

📂 ファイル構成

src/
├ store/
│ ├ index.ts      ← Vuexの本体
│ └ types.ts      ← 型を書く
├ components/
│ └ Counter.vue   ← クラスコンポーネント

📌 store/types.ts

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

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

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