Vue页面刷新数据丢失的根本原因是Vuex状态仅存于内存，需将关键信息如登录态、菜单、权限等持久化至sessionStorage；初始化时从sessionStorage读取并做类型转换，所有mutations中同步写入，推荐使用vuex-persistedstate插件实现可靠持久化。

Vue页面刷新后数据丢失，根本原因是Vuex状态只存在内存中，刷新即重置。要保留登录态、菜单、用户权限等关键信息，必须把数据“落地”到浏览器会话存储中。sessionStorage比localStorage更合适——它随标签页关闭自动清理，符合单页应用的会话生命周期，也避免跨会话残留旧数据。

初始化时从sessionStorage读取

在store的state定义阶段，直接从sessionStorage取值作为默认值。注意类型转换：

• 字符串字段（如token）：直接sessionStorage.getItem('token')
• 对象/数组（如menuList）：需JSON.parse(sessionStorage.getItem('menuList'))，并加空值判断防止报错
• 数字类型：用parseInt()或parseFloat()确保类型准确

变更时同步写入sessionStorage

所有修改state的mutations里，必须同步调用sessionStorage.setItem。例如：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

• SET_TOKEN：先存sessionStorage.setItem('token', token)，再赋值state.token = token
• SET_MENULIST：先sessionStorage.setItem('menuList', JSON.stringify(menuList))，再更新state
• 避免在actions里写存储逻辑，确保所有状态变更都经过mutation统一入口

用vuex-persistedstate插件省事又可靠

手动维护读写容易遗漏，推荐使用成熟插件。安装后只需两步：

立即学习“前端免费学习笔记（深入）”；

• 安装：npm install vuex-persistedstate
• 在store配置中添加插件：plugins: [createPersistedState({ storage: window.sessionStorage })]
• 默认持久化全部state；如只需保存部分字段，用reducer函数精确控制

补充：处理页面卸载前的兜底保存

极少数场景（如用户突然关闭标签页），mutation可能来不及触发。可在根组件created钩子中监听beforeunload事件：

• 注册监听：window.addEventListener('beforeunload', () => { sessionStorage.setItem('store', JSON.stringify(this.$store.state)) })
• 配合初始化时的replaceState，确保即使跳过mutation也能恢复
• 注意：该方式仅作补充，不能替代mutation内的同步写入