【勉強メモ】vuex-persistedstateを導入

ログインしたユーザーの情報をVuexで保持する処理を実装していて、ログインに成功した時に値をstateに入れるようにはできました。 しかし、画面をリロードするとstateの値が初期化されることに気づいてそこから苦戦しました。 なんとかイメージ通りの実装ができたのでメモメモ。

やりたいこととしては、画面をリロードしてもstateの値を保持して、タブが閉じられた時にstateの値を初期化するという感じでした。

そもそも勝手なイメージでVuexのデフォルトの挙動は画面リロードしてもstateの値を持ち続けるのかと思ってたのですが、調べたところ画面リロードの際にstateは初期化されるということがわかってきました。

それで「Vuex リロード」とかでググったらこちらの記事が見つかりました。

qiita.com

qiita.com

なるほど、vuex-persistedstateというプラグインを使うとVuexの値をsessionStorageやlocalStorageに保存して、リロードしても消えないようにできると。まさにこれを探してたので大変ありがたいです。

早速以下のコマンドでインストールして

npm install --save　vuex-persistedstate

store/index.jsに以下の感じで設定を追記

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
.
.
  },
  plugins: [createPersistedState({
    key: 'vuex-test',
    storage: window.sessionStorage
  })]
})

export default store

するとリロード後もstateの値を保持できるようになりました。この問題で結構ハマってたので突破できたのはなかなか嬉しい。

とりあえずsessionStorageに格納するようにしましたが、sessionStorageで値を保持するかlocalStorageに保持するかもいろいろとメリットデメリットあるようなので、どちらのパターンも試してみたいですね。

悩みながらちょっとずつ問題解決することで、フロントエンドのスキルを上げれてる手応えがあって良い感じです。 明日もしっかりコード書きます。