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-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 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内的同步写入
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
