Vuexのstateをリロードしても消したくない

はじめに

Vuex、便利ですね。他のコンポーネントで使いたいときに、ステートに入れておけば、好きなときに呼び出せる。
でも、使っていてどうしても不満に思っていたことがありました。
リロードしたら中身が消えてしまう。。。

vuex-persistedstate

Vuexのステートはリロードすることで、初期状態に戻ってしまいます。
そこで、ステートの中身をWebストレージ(Local Storage, Session Storage, Cookies ... )に一時的に保存して、リロードした際にはWebストレージを読み込ませて、解消する方法をとることにします。

そのために、必要となってくるのが、vuex-persistedstateです!

環境

  • macOS Big Sur 11.2.2
  • node v15.11.0
  • npm 7.6.0
  • @nuxt/cli v2.15.2

導入/設定

公式( GitHub - robinvdvleuten/vuex-persistedstate: 💾 Persist and rehydrate your Vuex state between page reloads.

)を参考に導入していきます。

npm install --save vuex-persistedstate

今回、storeはmoduleに分けて作成していたため、プラグインを新たに作成し、その中に設定内容を記載していきます。
最低限、keyとstorageは設定する方が良いです。

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({
    key: 'SAKEGRAM', // 任意の名称を設定
    storage: window.sessionStorage  // 今回はsessionStorageを保存先に設定
  })(store)
}

最後に、nuxt.config.jsに読み込ませておきます。

.
.
  plugins: [
    { src: '@/plugins/persistedState.client.js', ssr: false }, 
  }
.
.
  • ssrはfalseにしました

Chromeで確認する方法

デベロッパーツールのApplicationから保存した内容を確認することができます。 Image from Gyazo

keyをSAKEGRAMとしたので、SAKEGRAMという名前で確認することができます。
ちなみに、pathを指定することで、保存するstoreを設定できます。
今回は設定しなかったので、すべてのstoreのデータがsessionStorage内に保存されています。

参考

GitHub - robinvdvleuten/vuex-persistedstate: 💾 Persist and rehydrate your Vuex state between page reloads.

【Vue】リロードしても大丈夫。そう、vuex-persistedstateならね。 - Qiita

当サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。