【Vuex】リロードしてもStateの中身を消さずに維持する方法

vue.jsを使ってアプリケーションを作る際、vuexの利用は大変重要でありとても便利です。
大規模なアプリケーションではvuexは必須と言えますが、小規模な場合でもvuexを利用することをオススメします。

しかし、vuexに保存してあるデータはブラウザをリロードすると初期化されてしまいます。
vuexに状態だけ保存する場合は良いのですが、APIで取得したデータを保存しておきたい場合など不便な場合があります。

そんな時は自力で「ローカルストレージに一度逃して・・・」などと考えず、vuexのプラグインvuex-persistedstateを使いましょう。

vuex-persistedstateとは

vuex-persistedstateはvuexの状態をリアルタイムでlocalStorageに保存し、ブラウザをリロードしても元の状態を復元してくれるvuex専用プラグインです。

インストールと初期設定

プラグインの導入はnpmで行います。

ターミナル
$ npm install vuex-persistedstate
インストールが済んだら初期設定をしていきます。
特に難しいことはなく、vuexの設定用JavaScriptファイルにvuex-persistedstateをインポートし、簡単な設定を書くだけです。
その際、Stateの中身は変数に入れておきましょう。(初期化する際に必要なため)

これだけでvuexのStateが自動的にlocalStorageに保存されるようになります。
リロードしてもブラウザを閉じても状態が復元するはずです。

保存先をsessionStorageに変更する

デフォルトではデータの保存先は localStorage になっています。

タブを複製した際に、タブごとに別々のデータを扱ったり、ローカルにデータを残しておきたくない場合が結構あります。
その際はデータの保存先を sessionStorage に変更しましょう。

createPersistedState()の中のオプションに{storage: window.sessionStorage}を設定するだけで保存先が簡単に変更できます。

保存データのkey名を変更する

vuex-persistedstateで保存したデータの名前はデフォルトではvuexとなっています。

しかしアプリケーションやサイトが2つ以上存在する場合、同じ名前にしておくわけにはいきませんよね。
データが上書きされてしまします。
なのでそんなときはデータ名(key)を変更しましょう。

データの名前を確認するには、chromeの場合、デベロッパーツール -> Application -> Local Storage から確認できます。

createPersistedState()の中のオプションに{key: ‘アプリケーション1’}を設定するだけでデータ名が簡単に変更できます。

Vuex Stateの初期化

ユーザーログインを必要とするアプリケーションの場合、ログアウトした際にデータを初期化する必要があります。
vuex-persistedstateを使用してるとlocalStorage.removeItemでデータを消そうとしてもうまくいきません。
そんなときはステートの値を上書きする方法で初期化します。

ベストプラクティスなのかどうかわかりませんが、一番わかりやすく簡単な方法です。

初期のステートデータをlocalStorageに保存 -> ミューテーションを使って初期のlocalStorageに保存してある初期ステートを上書きという流れで行います。

  1. 初期ステートを設定
  2. main.jsのcreatedで初期ステートをローカルストレージに保存(JSONにするのを忘れずに)
  3. ミューテーションで初期ステートを上書き