Vuex(Store)で保存したデータがリロードすると消える

はじめに

フロントエンドにNuxt.jsを使用し開発中、Vuexに保存した情報が
リロードすると消えてしまって少しはまったその備忘録

環境

macOS
Nuxt.js Rails Docker postgresql

Storeについて

【Nuxt.jsでStoreにデータを保存するメリット】
componentsでもStoreから直接データを持ってこれる
※ Storeを使用しないとProps/emitを使用し各componentsへデータを渡さないといけない

対策

[vuex-persistedstate]を導入し
Storeに保存されたデータを[LocalStorage/SessionStorage]へ保存し
リロード時にデータを照合しStoreのデータを復元する
※今回はlocalStrageに入れます

vuex-persistedstate導入

root $ docker-compose run front yarn add vuex-persistedstate

localStrage.js作成

front $ touch plugins/localStrage.js

localstrage.js

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({})(store)
  // storage: window.sessionStorage // ←sessionStrageに保存したい場合はコメントアウトを外す
}

Nuxt.config.js

 plugins: [
    { src: '~/plugins/localStorage.js', ssr: false } //追加
  ],

これでStoreに保存された情報がlocalStrageにも保存されるようになる。
リロード時はlocalStrage内のデータと照合しStore情報とloalStrageを同期してくれる

最後に

注意：個人情報など他者にデータをとられてはいけないデータは情報漏洩につながるのでlocalStrageへの保存はNG!!

お疲れ様でした