2024.10.14

刷新页面后，Vuex 中的数据被重置的原因是 Vuex 状态存储在内存中，当页面刷新时，整个 JavaScript 运行环境会重新加载，Vuex 中的数据也会丢失。因此，this.$store.state.user.userId 在页面刷新后可能会变成 null 或 undefined。

要解决这个问题，你可以将用户数据（如 userId）持久化到浏览器的本地存储中（例如 localStorage 或 sessionStorage），然后在页面刷新时从本地存储中重新加载 Vuex 状态。

解决方案：持久化 Vuex 数据

1. 将用户数据存储到 localStorage

在用户登录或数据初始化时，将 userId 存储到 localStorage 中：

// 当用户登录或初始化时，将 userId 存储到 localStorage
localStorage.setItem('userId', this.$store.state.user.userId);

2. 在 Vuex 中初始化时恢复数据

在 Vuex 的 store 初始化时，从 localStorage 中恢复 userId，这样在页面刷新后可以从本地存储中获取到用户数据。

const store = new Vuex.Store({
  state: {
    user: {
      userId: localStorage.getItem('userId') || null,  // 初始化时从 localStorage 获取 userId
    }
  },
  mutations: {
    setUserId(state, userId) {
      state.user.userId = userId;
      localStorage.setItem('userId', userId);  // 同时将 userId 存储到 localStorage
    }
  },
  actions: {
    login({ commit }, userId) {
      commit('setUserId', userId);  // 设置 userId
    }
  }
});

3. 使用 vuex-persistedstate 插件（可选）

你还可以使用 vuex-persistedstate 插件，它能够自动将 Vuex 中的数据持久化到本地存储中，简化操作。首先，安装插件：

npm install vuex-persistedstate

然后在 store.js 中配置：

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  state: {
    user: {
      userId: null,
    }
  },
  mutations: {
    setUserId(state, userId) {
      state.user.userId = userId;
    }
  },
  plugins: [createPersistedState({
    storage: window.localStorage,  // 使用 localStorage 持久化
  })]
});

这样，每次刷新页面时，Vuex 的状态将自动从 localStorage 恢复。

总结

通过将用户数据存储到 localStorage 或使用 vuex-persistedstate 插件，你可以在页面刷新后保持 Vuex 状态，避免数据丢失。