【Nuxt.js】vuex-persistedstateを用いたデータの永続化について

Question

お世話になっております。
表題の通り、vuex-persistedstateを用いたデータの永続化についてご質問させていただきたいです。

質問内容

Vuexの値を永続化させるために、以下の3つの流れで実装を考えております。
①まずはstore.userにオブジェクトデータを保存

//mutationsにて
setUser(state, payload) {
  state.user = {...payload};
}

//actions内のログイン処理にて
const userInfo = {
  name: 'name'
};
commit("setUser", userInfo);

②vuex-persistedstateでローカルストレージにデータを格納
こちらの公式サイトの「Example with Nuxt.js」セクションに従って以下の様に設定いたしました。

// plugins/persistedState.client.jsにて
import createPersistedState from 'vuex-persistedstate'

export default ({store}) => {
  createPersistedState({
    key: 'movie-sharing-app',
  })(store)
}

// nuxt.config.jsにて
plugins: [
  { src: '~/plugins/persistedState.client.js', ssr: false }
]

③リロード時にnuxtClientInitでローカルストレージの値をstore.userに復元
クライアント側でリロードしたときの処理を書くために「nuxt-client-init-module」というモジュールを使い、store/index.jsのactionsに以下の処理を追加しました。

// store/index.jsにて
nuxtClientInit({ commit }) {
  const data = JSON.parse(localStorage.getItem('movie-sharing-app')) || []
  console.log(localStorage.getItem('movie-sharing-app')); //この値をコンソールで確認しました。
  if(data) {
    commit('setUser', data);
  }
}

しかしいざローカルストレージの値を取り出してみると、以下の様にuserオブジェクトの中に更にuserオブジェクトが連続しているような形式になっておりました。

// localStorage.getItem('movie-sharing-app')の値

{"user":{"user":{"user":{"user":{"user":{"user":{"user":{"user":{"user":{"user":{"user":{"user":{"user":{"user":{name: 'name'}}}}}}}}}}}}}}}

ローカルストレージを何度も上書きしているかもしれないと予想し原因を追究しているのですが、一向に分からず、皆様のご意見もお伺いしたいです。
是非宜しくお願い致します。

2021/07/13 19:13 追記：原因が分かりましたので報告いたします。
お世話になっております。
原因が分かりましたので、追記いたします。

まず事実としてページを1回リロードするたびにuserオブジェクトが1つずつ増えていきました。

//1回目
{user: { name: 'name' }}

//2回目
{user: {user: { name: 'name' }}}

//3回目
{user: {user: {user: { name: 'name' }}}}

・・・

これはvuex-persistedstateがstate以下をローカルストレージに保存している一方、commit('setuser', userInfo)ではstate.userに値を保存しているからでした。

つまりリロード時にnuxtClientInit関数を実行するたびにstate.userにローカルストレージの値が挿入され、どんどんuserオブジェクトが溜まっていくということです。

解決策については引き続き検討いたします。
とりあえず原因のご報告まで。

Answer 1

以上の問題を解決いたしましたので報告いたします。

Nuxt.jsのstateはオブジェクトではなく関数なので、任意のオブジェクトpayloadとの結合Object.assign(state, payload)が使えず、またstate.push(payload)も表示がおかしくなります。

ですのでvuex-persistedstateをpathsを指定せずにデフォルトで使う場合は、どうしてもstate以下を保存してしまうので、state, mutations, nuxtClientInitを以下のように変更しました。

// 修正前
// state
export const state = () => ({
  user: {}
})

// mutations
export const mutations = {
  setUser(state, payload) {
    state.user = {...payload};
  },
}

// actions/nuxtClientInit
nuxtClientInit({ commit }) {
  const data = JSON.parse(localStorage.getItem('movie-sharing-app')) || []
  if(data) {
    commit('setUser', data);
  }
}

↓
↓
↓

// 修正後
// state
export const state = () => ({
})

// mutations
export const mutations = {
  setState(state, payload) {
    state = payload;
  },
  setUser(state, payload) {
    state.user = {...payload};
  },
}

// actions/nuxtClientInit
nuxtClientInit({ commit }) {
  const data = JSON.parse(localStorage.getItem('movie-sharing-app')) || []
  if(data) {
    commit('setState', data);
  }
}

以上のコードにすれば、Vuexのデータの永続化が可能となりました。
ほかに良い案などがあればコメントにて受け付けます。