Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
  • 2022.01.09に公開
  • ブログ構築TS
  • 6. Vuex×TypeScriptセットアップ
  • No.1 / 4

Vuexストアを型付けするモジュールの検討

Nuxt × Vuex × TypeScriptを使用するにあたって、Vuexストアに型付けを行うには複数の選択肢があります。

どのようなモジュールがあり、どんな違いがあるかを知って使用する型付けモジュールを決定します。

今回比較するのは以下の2つです。

  1. クラスベースのvuex-module-decorators
  2. バニラ(従来の書き方)ベースのnuxt-typed-vuex

検討1. vuex-module-decoratorsを使用するか

Vuexストアを型付けするにあたって、最も人気のあるモジュールは vuex-module-decorators です。

vuex-module-decoratorsモジュールは、nuxt-property-decoratorにラップされており、いつでも使用できる状態です。

% yarn list --pattern vuex-module-decorators
└─ vuex-module-decorators@1.2.0

vuex-module-decoratorsの書き方

vuex-module-decoratorsは、クラスベースで Vuexストアに型付けを行う方法を取ります。

store/mymodule.ts
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators'

@Module({
  stateFactory: true,
  name: 'mymodule',
  namespaced: true
})
export default class MyModule extends VuexModule {
  count: number = 0

  @Mutation
  increment (delta: number) {
    this.count += delta
  }

  @Action({ commit: 'increment' })
  incr (delta: number) {
    return delta
  }
}
store/index.ts
import { Store } from 'vuex'
import { getModule } from 'vuex-module-decorators'
import mymodule from './mymodule'

let indexStore: mymodule

function initialiseStores (store: Store<any>): void {
  indexStore = getModule(mymodule, store)
}

const initializer = (store: Store<any>) => initialiseStores(store)

export const plugins = [initializer]
export {
  initialiseStores,
  indexStore
}

見ての通り、TypeScriptを使用しない従来の書き方と大きく違うため、ある程度の学習コストが必要です。

検討2. nuxt-typed-vuexを使用する

対して、従来のVuexの書き方を残したまま型付けしやすいようにVuexをラップした nuxt-typed-vuex というモジュールも存在します。

Vuex はアプリケーションからストアへアクセスするための便利な型を提供していません。this.$store は Nuxt アプリケーションで型指定されていないままです。

nuxt-typed-vuexという新しいプロジェクトがあり(ガイド)、このプロジェクトは素の Nuxt ストアに強く型付けされたアクセサーを提供することで上述の件を改善することを目的としています。

引用: ストア - Nuxt TypeScript

nuxt-typed-vuexの書き方

nuxt-typed-vuexは、バニラベースでVuexストアに型付けする方法を取ります。

store/index.ts
import { getAccessorType, getterTree, mutationTree, actionTree } from 'typed-vuex'

export const state = () => ({
  count: 0 as number
})

export const getters = getterTree(state, {})

export const mutations = mutationTree(state, {
  increment (state: RootState, delta: number): void {
    state.count = delta
  }
})

export const actions = actionTree({ state, getters, mutations }, {
  getActiveTocId ({ commit }: { commit: any }, delta: number) {
    commit('increment', delta)
  }
})

export const accessorType = getAccessorType({
  state,
  getters,
  mutations,
  actions,
  modules: {
    /* store module */
  }
})

nuxt-typed-vuexは v0.2.0(2022年1月現在)とまだ新しいモジュールですが、今まで純粋なVuexを使用してきた方には、直感的に型付けが行えるコード設計となっています。

また、上記引用を見ても公式(Nuxt TypeScript)で紹介されているモジュールなので、ある程度の信頼はできるでしょう。(これは肌感)

結論 nuxt-typed-vuexを使用する

今回はできるだけ学習コストを抑えたnuxt-typed-vuexを使用します。

本ブログもnuxt-typed-vuexを使用していますが、v0.2.0でも何の問題も無く使用できていますのでご安心ください。

ちなみに、Nuxt3の移行を見据えたvuex-type-helperを使用する方法もありました。

移行の考え方など、参考になる情報でしたのでここに共有します。

Vuex ストアに TypeScript の型を付ける(2020年12月版) - hey Product Blog

Nuxt3からはVuexがデフォルトでなくなる

Nuxt3 Betaが2021年12月に発表されましたが、Vuexの代わりに状態管理を行うuseStoreという機能が組み込まれました。

またVue3からは、Composition APIを前提としたPiniaという新しい状態管理ライブラリが使用できるようになりました。

この流れを見ると、NuxtからVuexが完全に消える日もそう遠くないかもしれません。

次回は?

上記は筆者の考え方であってvuex-module-decoratorsを使用しない方が良い。という意見ではありません。

あくまで好みの問題であり、クラスベースに慣れている方はvuex-module-decoratorsの使用を検討してください。

さて次回はnuxt-typed-vuexのインストールとセットアップを行います。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
独学プログラマ
独学でも、ここまでできるってよ。
LOGS
更新終了した過去の記事たち
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。