Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
16
Help us understand the problem. What is going on with this article?
@niyou0ct

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

More than 1 year has passed since last update.

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

16
Help us understand the problem. What is going on with this article?
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
niyou0ct

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
16
Help us understand the problem. What is going on with this article?