Vue.js + VuexでステートをブラウザのLocalStorageに保存・復元して永続管理する

Vuexのステート管理と動作

Vueの状態管理を担うVuexは、Vueアプリ全体でデータを取得・更新できるため、非常に便利です。

ステート | Vuex

しかし、Vuexはブラウザのセッションごとにデータを持っているため、ブラウザやタブを閉じた際や、新しいタブで開いた際には、ステートは初期化されてしまいます。

例えば、流行りのダークモードなどのフラグをVuexのステートで持っていて、ブラウザを閉じてまた開いた時などは、そのフラグは、最後に設定したステートを復元してくれる方がユーザーフレンドリーです。

そこで、Vuexとブラウザのローカルストレージを利用して、Vuexのステートデータを永続化させることで、これらの問題を解決します。

Vuexのステートを永続化する方法

プラグインを使う

Vuexのステートを全てLocalStorageに保存してくれる便利なプラグイン「vuex-persistedstate」が用意されています。

このプラグインをnpmなりyarnなりでインストールして、storeファイルで、

import createPersistedState from "vuex-persistedstate";

export default new Vuex.Store({
  plugins: [createPersistedState()]
})

とすれば、即永続化してくれるので楽チンです。

mutationを用意する

プラグインを使わない場合は、storeのmutationで保存、復元をすればOKです。

localStorage.setItem('darkMode', JSON.stringify(state.darkMode)); // 保存
state['darkMode'] = JSON.parse(localStorage.getItem('darkMode')) // 復元

プラグインを使ったほうが楽ですが、自分で書くと保存するステートを管理しやすいというメリットもあります。

自分の場合は、actionでステートを更新するたびにLocalstorageに保存して、App.vueをレストアactionを登録して、Createする度に（ページがロードされるたび）ステートがレストアされるようにしています。

以上、ざっくりとですが、Vuexのステートを永続化する方法を見てきました。

SPAを作る際、Vuexでステート管理は外せない部分だと思うので、永続化させてさらにユーザービリティをあげたいですね。