如何在本地存储 Nuxt.js 中保存用户连接？

Question

我正在 nuxt.js 中制作一个应用程序，我使用商店来存储数据，包括连接的用户，我想将用户的连接元素保存在 localStorage 中。因此，为此我使用了一个 vuex-persist 插件，代码如下。

这是我的 store/login.js :

export const state = () => ({
    user: ''
})

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

export const getters = {
    getUser(state) {
        return state.user
    }
}

这是我的 plugin/vuex-persist.js :

import VuexPersistence from 'vuex-persist';

export default ({ store }) => {
  window.onNuxtReady(() => {
    new VuexPersistence({
      key: "vuex",
      storage: window.localStorage,
      reducer: state => ({ login: state.login }),
    }).plugin(store);
  });
};

所以这会将用户保存在 localStorage 中，例如：

但是当我刷新页面或在新标签页中打开新页面时，我必须一直重新连接。

我不明白为什么，因为当我不在我的插件中放置 reducer 函数时，我不需要经常重新连接，但问题是它不只是将用户保存在 localStorage 中。

感谢您的帮助

Answer 1

我不知道你的插件有什么问题，也许它没有在 nuxt.config.js 中正确注册？

// Inside - nuxt.config.js
export default {
   plugins: [{ src: '~/plugins/vuex-persist.js', mode: 'client' }],
}

或者问题可能是将插件与以下内容结合使用：

  window.onNuxtReady(() => {

因为我个人从来不需要加载任何外部 plugins/libraries 的 onNuxtReady 并且在所述插件的文档中没有提到它。

尽管如此，您可以考虑使用库 vuex-persistedstate，它基本上做完全相同的事情，我从来没有遇到过任何问题。

抱歉没有真正回答您的问题，但我想也许建议其他图书馆可以帮助您或其他任何人

Answer 2

Vuex-persisted 未维护您可以使用 vuex-along https://github.com/boenfu/vuex-along 几乎相同我无法评论这就是为什么使用答案。

如何在本地存储 Nuxt.js 中保存用户连接？

How save user connection in Local storage Nuxt.js?

javascript

vue.js

nuxt.js

local-storage

vuetify.js