Nuxt を用いてグローバルな状態管理を行う場合、一般的な選択肢は Vuex かと思います。
一方で Vuex を使って状態管理をしようとすると、TypeScript による型の恩恵を受けにくいというデメリットがあります。昨今は Vuex 4 系での TS 対応など、以前に比べると環境が改善されてきている印象ですが、それでも完全とはいえない状態です。
というわけで Vuex に代わる TS と相性が良い状態管理の方法を調べていたのですが、nuxt-typed-vuex が良さそうという結論になりました。
nuxt-typed-vuex とは？
nuxt-typed-vuex は内部を見た感じ Vuex の薄いラッパーです。ちなみに Nuxt 依存のない typed-vuex という実装も存在するので、Nuxt 以外のプロジェクトへの導入も可能です。
Getting started (Nuxt) - Typed Vuex にある通り、インストールも簡単で以下の手順で導入できます。
yarn add nuxt-typed-vuex-
buildModulesに'nuxt-typed-vuex'を追加 - 型定義ファイルを作成
import { accessorType } from "~/store";
declare module "vue/types/vue" {
interface Vue {
$accessor: typeof accessorType;
}
}
declare module "@nuxt/types" {
interface NuxtAppOptions {
$accessor: typeof accessorType;
}
}
使い方
Store の定義は State - Typed Vuex や Actions - Typed Vuex などを参考にしてください。基本的に、Vuex での Store 定義と似たように実装できます。
呼び出し時はthis.$accessorを経由します。
// Accesses this.$store.state.email
this.$accessor.email;
// Accesses this.$store.getters['fullName']
this.$accessor.fullName;
// Runs this.$store.dispatch('initialiseStore')
this.$accessor.initialiseStore();
// Runs this.$store.commit('SET_NAME', 'John Doe')
this.$accessor.SET_NAME("John Doe");
// Accesses this.$store.state.submodule.id
this.$accessor.submodule.id;
// etc.
上記の通り、State、Getters、Mutations、Actions に完璧に型の補完が効いている状態になっています。
使ってみた感想
nuxt-typed-vuex はいくつかのプロジェクトで利用していますが、いまのところ問題なく利用できています。Vuex と似たように使えるのでテストの書き換えもそこまで大変ではありませんでした。mapGetters などの機能を使っていない方であれば、簡単に Vuex から移行できるかと思います。
使ってみた実感としては、やはり型がある状態で Store の呼び出しができるのは非常に快適ですね 😄
若干の注意点は、上記呼び出し例にもある通り State と Getters の呼び出し方法に違いがないため同名の State と Getters がある場合は Getters の方が優先されるという点でしょうか。これは大きな問題になることはないと思いますが、通常の Vuex のように Getters から明示的に呼び出す方法は今のところないっぽいので、意識しておいたほうが良さそうです。