Vue.js中如何持久化存储已登录用户的名称？

嘿，我注意到你已经引入了vuex-persistedstate和js-cookie这两个工具，但还没把它们配置到Vuex Store中——这正是刷新后数据丢失的关键原因！Vuex的默认state是存在内存里的，页面刷新时内存会被清空，而vuex-persistedstate就是用来帮我们把指定的state持久化到本地存储（比如Cookie或localStorage）的插件。

下面是完整的修复步骤：

1. 完善Vuex Store的持久化配置 #

修改你的store.js文件，添加plugins配置项，把createPersistedState集成进去：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import Cookies from 'js-cookie'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    userloged: ''
  },
  // 添加持久化插件配置
  plugins: [
    createPersistedState({
      // 配置用Cookie存储（比localStorage更适合用户信息，安全性更高）
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { 
          expires: 7, // Cookie有效期7天
          secure: process.env.NODE_ENV === 'production' // 生产环境下仅HTTPS传输
        }),
        removeItem: key => Cookies.remove(key)
      },
      // 只持久化userloged这个state，避免存储不必要的数据
      paths: ['userloged']
    })
  ],
  // 推荐添加mutations来修改state（Vuex规范做法）
  mutations: {
    SET_USERLOGED(state, username) {
      state.userloged = username
    }
  }
})

2. 规范修改state的方式 #

Vuex不推荐直接修改this.$store.state，而是通过mutations来修改，这样不仅符合Vuex的设计规范，还能确保持久化插件能正确监听到state的变化。

修改你的登录组件代码：

// 原来的直接修改state：
// this.$store.state.userloged = this.username;

// 改成通过commit触发mutation：
this.$store.commit('SET_USERLOGED', this.username)

3. 可选：用localStorage替代Cookie #

如果你不需要Cookie的特性（比如跨域、后端读取等），也可以直接用localStorage存储，配置更简单：

plugins: [
  createPersistedState({
    paths: ['userloged'] // 只持久化指定的state
  })
]

⚠️ 注意：localStorage存在XSS攻击风险，敏感的用户信息更推荐用Cookie存储（如果能配合后端设置httpOnly和SameSite属性会更安全）。

这样配置后，即使刷新页面，userloged的值也会从Cookie/localStorage中自动恢复，不会丢失啦！

内容的提问来源于stack exchange，提问作者Camila NieblesR