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となっています。
しかしアプリケーションやサイトが２つ以上存在する場合、同じ名前にしておくわけにはいきませんよね。
データが上書きされてしまします。
なのでそんなときはデータ名(key)を変更しましょう。
データの名前を確認するには、chromeの場合、デベロッパーツール -> Application -> Local Storage から確認できます。
createPersistedState()の中のオプションに{key: ‘アプリケーション1’}を設定するだけでデータ名が簡単に変更できます。
Vuex Stateの初期化
ユーザーログインを必要とするアプリケーションの場合、ログアウトした際にデータを初期化する必要があります。
vuex-persistedstateを使用してるとlocalStorage.removeItemでデータを消そうとしてもうまくいきません。
そんなときはステートの値を上書きする方法で初期化します。
ベストプラクティスなのかどうかわかりませんが、一番わかりやすく簡単な方法です。
初期のステートデータをlocalStorageに保存 -> ミューテーションを使って初期のlocalStorageに保存してある初期ステートを上書きという流れで行います。
- 初期ステートを設定
- main.jsのcreatedで初期ステートをローカルストレージに保存（JSONにするのを忘れずに）
- ミューテーションで初期ステートを上書き
