TL;DR
以下のようなファイルを自動生成できます。
はじめに
Vuexを使っている場合、ほとんどの割合でモジュールを使用すると思いますが
モジュールを作成するときの作業って面倒ですよね。
そんなときにうってつけのジェネレータをご紹介します。
GitHub : https://github.com/lyonlai/generator-vuex
このジェネレータを使用したプロジェクトのサンプルはGitHubに置いています。
(カウントのインクリメントとリセットをストアで管理するアプリ)
使い方
READMEにも説明を書いてくれてますが、一応こちらでも使い方を説明しておきます。
yeomanをインストール
yeomanを使用するので、yeomanをインストールします。
npm install -g yo
ジェネレータをインストール
npm install -g generator-vuex
実行
最初に一度のみ使用するストア生成コマンドと、
モジュールを生成するコマンドの２種類が用意されています。
ストア生成
ストアを生成する場合、vuex-module-configuration-composerを追加する必要がありま
す。
npm install vuex-module-configuration-composer
インストールできたらyeomanのコマンドを実行します。
yo vuex
2つ質問されますが、何も入力せずエンターで大丈夫です。
終了するとsrc/storeにファイルが生成されます。
- modules(空のフォルダ)
- actions.js
- getters.js
- index.js
- mutation-types.js
- mutations.js
- state.js
こちらのindex.jsがVuexのインスタンスを生成するため、プロジェクトに組み込みます。
モジュール生成
package.jsonと同じディレクトリでyeomanのコマンドを実行します。
yo vuex:modules
質問に対してモジュール名を入力します。(画像のモジュール名はlogin)
使用方法の説明は以上です。
モジュール追加後
生成されたモジュールにはresetStateというアクションのみ用意されています。
このアクションを呼び出すと該当のモジュールのstateを初期化することができます。
これで手作業でファイルをコピーして書き直すような作業からは開放されましたね！
yeomanは割と古いので、他に使っているツールがあれば、コメントいただけるとうれしいです