【3章 続き】this.$store を直接使う場合との違い (vuex-class との比較)

🎯 要点まとめ

• this.$store 直接書く → 毎回手書きする、型補完が弱い
• vuex-class デコレータを使う → 型補完が効く、宣言的にわかりやすい、コードが短くなる
• 特にTypeScriptではデコレータの方が型安全でミスに強い
• 大きなプロジェクトほどデコレータの効果が出る

🥕 たとえ：ラベルを貼ってある vs 毎回探す

冷蔵庫から卵を取りたいとき、

「毎回卵を探す（this.$store.state.egg）」のはめんどくさい。

「これが卵です！（@State('egg') public myEgg!: Egg;）」って

ラベル貼っておけばすぐ取り出せる。

→ 書き間違いも減る。

📦 具体的な違い

🚫 直接 this.$store を使うパターン

this.$store.state.count;                       // 変数名間違うと気づきにくい
this.$store.getters.userInfo;                  // 毎回"getters."って書く必要がある
this.$store.commit('increment');               // mutation名も手で書く
this.$store.dispatch('updateUserName', 'Hanako'); // action名も手で書く

✅ vuex-class デコレータを使うパターン

// countをstateからそのままプロパティで使える
@State('count') public count!: number;

// getterもプロパティとして直接使える
@Getter('userInfo') public userInfo!: string;

// mutationも関数としてそのまま使える
@Mutation('increment') public increment!: () => void;

// actionも関数としてそのまま使える（引数も型チェック）
@Action('updateUserName') public updateUserName!: (name: string) => Promise<void>;

// 呼び出しは超シンプル
this.increment();
this.updateUserName('Hanako');