Vuex.Storeのコンストラクタオプションの中身を覗く

VuexをいじっていたらStoreのコンストラクタオプションにgetterの存在を確認した。

「お！getterなんてあるんかい！」と、getterを使ったことがなかったために妙なテンションになり、たまには特に目的を持たず一箇所深掘りしてみるか〜と思い至った次第である。

Vuex.Store コンストラクタオプション

getterがあるなんて他はなにがあるんじゃろと思い、getterから参照すると型定義は下記のようであった。

export interface StoreOptions<S> {
  state?: S | (() => S);
  getters?: GetterTree<S, S>;
  actions?: ActionTree<S, S>;
  mutations?: MutationTree<S>;
  modules?: ModuleTree<S>;
  plugins?: Plugin<S>[];
  strict?: boolean;
  devtools?: boolean;
}

各プロパティの説明はこちらのリファレンスに載っていた。
API リファレンス | Vuex

下の４つがよくわからないので調べがてらまとめてみた。

modules

Vuexでは大規模アプリケーションを考慮し、ストア全体を管理するルートストアの配下にストアを分割配置するという手段を提供してくれているらしい。

そこで登場するのがこちらのmoduleプロパティである。

具体例はこちらにあるが、💡Vuexには大きくなりすぎたStoreを分割する手段がある。ということだけとりあえず覚えておこう。

plugins

これ自体は単一の引数としてストアを受けつけるただの関数。

ミューテーションのコミットをトリガーとし、ログの取得やストアと外部データソースの同期などのために利用される。

具体的な例はこちらを見ると納得感が得られる。

💡DBにデータを保存したいときはpluginで行うということを覚えておきたい。

strict

なんとストアにstrictモードがあるらしい。

Vuex ストアを厳格モードにします。厳格モードでは、ミューテーションハンドラ以外で、 Vuex の状態の変更を行うと、エラーが投げられます。

なるほど、デフォでstrictモードにしたい。

devtool

特定の Vuex インスタンスに対して開発ツールをオン、またはオフにできる。

上記で紹介したpluginの機能を使ってvueは開発者ツールにVueの情報を出しているようだが、それを操作できる代物らしい。

おそらくお世話になることはないだろう。

ここ最近気分でブログに書き出しているが、ブログにまとめようと思える単位で新しいことを学ぶと理解しやすい気がする。