[Nuxt] vuex-persistedstateを使用しても値が復帰しない

vuexのstateを使用し、バックエンド側から取得してきたデータを保持し、それを永続化したかったのでvuex-persistedstateを使用しました。
ですが、ページをリロードした際、取得している値が描画されないエラーが発生しました。

vuex-persistedstateのインストール方法はこちら

解決方法

nuxt-client-init-moduleを使用することで解決しました。

nuxt-client-init-moduleのインストール

npm install nuxt-client-init-module

nuxt.config.jsに定義

nuxt.config.js

export default {
 :
 modules: [
    'nuxt-client-init-module'
 ],
 :
 :
}

store/index.jsにnuxtClientInit()を追加

store/index.js

export const actions = {
  nuxtClientInit({ commit }, context) {
    const data = JSON.parse(sessionStorage.getItem('persisted-key')) || []
    //　条件式
  }
}

条件式の部分に、描画させたい値を各stateへcommitする形で記述します。

store/index.js

export const actions = {
  nuxtClientInit({ commit }, context) {
    const data = JSON.parse(sessionStorage.getItem('persisted-key')) || []
    if (data.auth) {
      commit('myData/setLoginUser', data.myData.loginUser)
    }
  },

上記の場合、session storageに保持しているmydata.loginUserの値をloginUserへcommitしています。

store/myData.js

export const mutations = {
  setLoginUser (state, loginUser ) {
    state.loginUser = loginUser
  },

↓　mutationをcommit

store/myData.js

export const state = () => ({
  loginUser: []
}

vuexについてはこちら

auth moduleを使用しているので、store/auth.jsに値が入っている場合のみcommitを実行するようにしています。

＊ここでは説明のために「store/auth.js」とファイル名にしていますが、実際はauth moduleを使用すると「auth」という名前がstoreで使用されることになるようなので、store内に同じファイル名を作成することは出来ません。
また、if文でif (data.auth.loggedIn) {...}のようにstate名まで指定してしまうとエラーが発生してしまうので、注意が必要です。

ストレージはlocalStorage / sessionStorageのどちらでも大丈夫です。

＊現在、vuex-persistedstateはサポート外のようです。

参考記事