Vuex 状态刷新丢失是因数据默认存于内存，解决方案有三：一、手动用 localStorage/sessionStorage 同步；二、使用 vuex-persistedstate 插件自动持久化；三、按业务语义选择 sessionStorage（会话级）或 localStorage（跨会话），并注意敏感信息与降级处理。

刷新页面后 Vuex 状态丢失，是因为 Vuex 默认把数据存在内存里，一刷新整个 JavaScript 环境重载，state 就清空了。这不是 bug，是设计使然——但用户体验不能妥协。下面三种方案覆盖从手动控制到开箱即用的场景，按需选择。

方案一：用 localStorage 或 sessionStorage 手动同步

适合轻量应用或想完全掌控读写时机的场景。核心逻辑就两点：初始化时读、变更时存。

• 初始化 state 时，从 localStorage.getItem('vuex_state') 读取并 JSON.parse 还原；没值就用默认状态
• 每次 mutation 更新 state 后，立刻 JSON.stringify(state) 并存入 localStorage（或 sessionStorage）
• 注意类型还原：字符串、数字、对象要分别处理，比如 sessionStorage 存的是字符串，读出来得手动转回数字或数组
• 敏感信息如 token、密码不要直接存；大对象频繁存可能卡顿，可加防抖（例如延迟 300ms 再写）

方案二：用 vuex-persistedstate 插件自动托管

最常用、最省心的方案，社区成熟稳定，Vue 2 和 Vue 3 都支持。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 安装：npm install vuex-persistedstate
• 引入插件并配置到 Store 实例的 plugins 数组中
• 默认存 localStorage，改用 sessionStorage 只需加 storage: window.sessionStorage
• 只持久化部分字段？用 paths 选项，比如 paths: ['user', 'cart.items']，避免存整个大 state

方案三：按会话粒度选存储介质，匹配业务语义

不是所有状态都该“永久”存在。选对存储方式，比硬存更重要。

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

• sessionStorage：适合登录态、临时筛选条件、表单草稿——关掉标签页就清空，符合用户心理预期
• localStorage：适合用户偏好设置、主题色、语言选择——跨会话保留，但得提醒用户可手动清除
• 隐身模式下 Web Storage 不可用，此时应有降级逻辑（比如 fallback 到内存初始值，不报错）
• 别把 token 当普通状态存：建议配合 HTTP-only Cookie + 前端内存管理，更安全