【Vue.js】Vuexで情報の永続化と読み込み

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリです。
Vuex とは何か？ ｜ Vuex

　Vuexは状態管理パターン + ライブラリであり複数のコンポーネント間を横断する状態を示すデータが多くあるような状況で真価を発揮します。Vuexを使った場合、状態の表現はコンポーネントから分離されます。そのためVuexを使っているとコンポーネントとは違った単位で状態をまとめることを考えやすくなります。例えばアプリの設定です。この記事ではアプリの設定の保存、読み込みを例にしてVuexで情報の永続化と読み込みの楽なやり方を紹介します。
　情報の永続化と読み込み管理で主となるVuexの機能はプラグインです。
プラグイン ｜ Vuex
　プラグインはstoreとのやり取りが発生した時に発火するイベント内容を定義する関数を追加する機能です。これによってVuex初期化時に設定ファイルからデータ読み込み、データ更新時に設定ファイルを更新、をします。コードは以下になります。

// プラグイン定義
const repositoryPlugin = async (store:Store<any>) => {
    try {
        // アプリ設定のモジュールに設定ファイルからデータ読み込み
        const content: AppConfigStoreState = JSON.parse(
            fs.readFileSync(path.join('./app.conf'), {encoding: 'utf8'})
        );
        // 解釈した設定ファイルに基づいて状態を更新. 値がundefinedの場合は更新しない
        content.LineColor && await store.dispatch('AppConfigStore/setLineColor', content.LineColor);
        content.updateIntervalMilliSec && await store.dispatch('AppConfigStore/setUpdateIntervalMilliSec', content.updateIntervalMilliSec);
    } catch (e) {
        if (!(e.toString().match(/ENOENT: no such file or directory/g))) {
            // 設定ファイルが存在しない以外のエラーの場合は握りつぶさずに上へ投げる
            throw e;
        }
    }
    // 更新が起きるたびにイベント発火
    store.subscribe((mutation, state) => {
        if (mutation.type.match(/AppConfigStore/g)) {
            // 更新が起きた状態が設定モジュールの時のみ外部の設定ファイルに出力
            fs.writeFileSync(path.join('./app.conf'), JSON.stringify(state.AppConfigStore), {encoding: 'utf8'});
        }
    });
};
// store.ts Vuexインスタンス化コード部
export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {
        AppConfigStore,
        HogeStore,
    },
    plugins: [repositoryPlugin], // プラグイン登録
});

　上のコードでは外部ファイルに吐き出すようにしましたが、実際はデータベースでもローカルストレージでも自由です。重要なのはプラグインでストアの初期化時、更新時に任意の動作を簡単に仕込めるという点です。