Help us understand the problem. What is going on with this article?

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の詳しい使用方法を追記していきます。

niyou0ct
fork
株式会社フォークは、Webサイトの企画・制作・開発・サーバホスティング・コンタクトセンターを一社に集約したワンストップソリューションを展開する制作会社です。
https://www.fork.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした