VuexをTypeScriptでモダンに書ける "vuex-module-decorators" の使い方

Vuexのstate, action, mutation, getterをそれぞれ公式に書いてある通り記述していき、それらを使用するときはstoreから読み込んで操作をするのが通常の書き方です。TypeScriptを使用しないVueプロジェクトであればそれでも良いですが、TypeScriptを使用して型定義をしっかりおこないたい場合は、vuex-module-decoratorsを使用して堅牢なファイル構成を実現できます。

それでは早速使用していきましょう！

vuex-module-decoratorsって何？

簡単に言うとVuexをclass構文で書くことができるツールです。

通常の書き方と何が違うの？

通常のstoreは下記のような書き方になるかと思います。

store.ts

import Vue from 'vue'
import Vuex, { StoreOptions, Plugin } from 'vuex'

const store: StoreOptions<RootState> = {
  state: {
    hoge: ''
  },
  getters: {
    hogehoge(state) {
      return state.hoge + 'hoge'
    }
  }
  mutations: {
    add(state, payload) {
      state.hoge = state.hoge + payload
    }
  }
}

Vue.use(Vuex)

export default new Vuex.Store<RootState>(store)

これをvuex-module-decoratorsを使用すると下記のように書き換えができます。

store/hoge.ts

import { Module, VuexModule, Mutation, getModule } from 'vuex-module-decorators'
import store from '..';

@Module({
  dynamic: true, store, name: 'HogeModule', namespaced: true,
})
class HogeModule extends VuexModule {
  public hoge: string = ''

  public get hogehoge(): string {
    return this.hoge + 'hoge'
  }

  @Mutation
  public add(payload: string): void {
    this.hoge = this.hoge + payload
  }
}

export default getModule(SearchBookModule)

store.ts

import Vue from 'vue';
import Vuex from 'vuex';
import { RootState } from './types';

Vue.use(Vuex);

export default new Vuex.Store<RootState>({});

まず、stateでデータの初期化をしていた部分は class HogeModule のプロパティとして使用しています。
gettersで取得していた hogehogeも getプロパティに置き換えることができます。

mutationsは　＠Mutationというデコレーターをvuex-module-decoratorsから読み込み、その下にメソッドのように記述すれば良いです。このとき、stateにあったhogeはthis.hogeで参照することが可能になるので、引数にstateを置いてあげる必要も無くなりました。

また、最終的に一つのstoreにまとめていた部分を、getModuleを使用して個々に登録しています。これでstoreに登録できた状態となります。

どういったメリットがあるの？

通常のvuexの書き方では、使用するときに型が曖昧な状態なので本来宣言している型と違う型のデータをmutationやactionに送ったり、getterで取得しても通ってしまいます。これではTypeScriptで書いている恩恵がありません。
しかし vuex-module-decorators を使用すればクラス構文内で型宣言をしているので、使用するときも型が一致していないと通りません。ここは実際に使用したものを触ってみたほうがわかりやすいかと思います。

実際に使用してみましょう

今回実際に使用できるようにサンプルコードをGitHubのリポジトリにあげています。内容はGoogle書籍検索APIを使って、書籍検索機能を作っています。よかったら参考にしてください
https://github.com/niyou0ct/Google-Books-API

説明文をまとめることができればvuex-module-decoratorsの詳しい使用方法を追記していきます。