大家好，我是小杨，一个写了6年前端的老司机。今天想和大家聊聊一个Vue项目中经常遇到的坑：用Vuex存储的数据，一刷新页面就没了！
相信很多用Vuex做状态管理的同学都遇到过这个问题------明明登录成功了，一刷新页面又跳回登录页；购物车里的商品，刷新后全空了。今天我就来分享几种解决方案，帮你彻底搞定这个烦人的问题。
一、为什么Vuex数据会丢失？
先搞清楚原理：Vuex的数据是存在内存中的。这就意味着：
- 页面刷新 → 浏览器重新加载 → JavaScript内存重置 → Vuex数据清空
所以要想持久化数据，我们必须把数据存到"不会轻易丢失"的地方。常见的有三种方案：
二、解决方案1：localStorage/sessionStorage（简单粗暴）
这是最直接的方案，在Vuex数据变化时同步到Storage：
js
// store/index.js
const store = new Vuex.Store({
state: {
userInfo: JSON.parse(localStorage.getItem('userInfo')) || null
},
mutations: {
setUserInfo(state, payload) {
state.userInfo = payload
localStorage.setItem('userInfo', JSON.stringify(payload)) // 同步存储
},
clearUserInfo(state) {
state.userInfo = null
localStorage.removeItem('userInfo') // 清除存储
}
}
})
// 使用示例
methods: {
login() {
const myData = { name: '小杨', token: 'abc123' }
this.$store.commit('setUserInfo', myData)
}
}优点：
- 实现简单，无需额外库
- 数据真·持久化（除非用户手动清除）
缺点：
- 需要手动同步，容易遗漏
- 存储大小有限（通常5MB）
三、解决方案2：vuex-persistedstate（优雅推荐）
如果你不想自己写存储逻辑，可以用这个现成插件：
bash
npm install vuex-persistedstate
js
// store/index.js
import createPersistedState from 'vuex-persistedstate'
const store = new Vuex.Store({
// ...
plugins: [
createPersistedState({
key: 'my-vuex-storage', // 存储的key名
paths: ['userInfo', 'cart'], // 只持久化指定模块
storage: window.sessionStorage // 改用sessionStorage
})
]
})插件原理：
- 在Vuex初始化时从storage读取数据
- 订阅mutation，数据变化时自动更新storage
进阶配置：
js
createPersistedState({
storage: {
getItem: key => uni.getStorageSync(key), // 小程序兼容方案
setItem: (key, value) => uni.setStorageSync(key, value),
removeItem: key => uni.removeStorageSync(key)
}
})四、解决方案3：Cookie（适合配合SSR）
如果需要和后端交互（比如自动带token），可以用Cookie存储：
js
import Cookies from 'js-cookie'
const store = new Vuex.Store({
state: {
token: Cookies.get('token') || null
},
mutations: {
setToken(state, token) {
state.token = token
Cookies.set('token', token, { expires: 7 }) // 7天后过期
}
}
})Cookie vs localStorage：
| 特性 | Cookie | localStorage |
|---|---|---|
| 容量 | 4KB左右 | 5MB左右 |
| 是否随请求发送 | 是（需注意安全） | 否 |
| 服务端是否可读 | 是 | 否 |
五、性能与安全注意事项
-
不要什么数据都存：只存必要数据（如用户token、基础信息）
-
敏感信息处理：
js// 错误示范！存了密码明文 localStorage.setItem('password', '123456') // 正确做法：只存token localStorage.setItem('token', '加密后的字符串') -
定期清理：设置合理的过期时间
-
大对象慎存：可能影响页面加载性能
六、终极方案：组合拳
在我的实际项目中，通常会这样搭配使用：
- 用户token → Cookie存储（方便SSR和HTTP自动携带）
- 用户基础信息 → localStorage + Vuex（减少接口请求）
- 临时数据 → 纯Vuex（如表单填写状态）
七、总结
| 方案 | 适用场景 | 一句话评价 |
|---|---|---|
| localStorage | 需要长期存储的简单数据 | 简单但需手动同步 |
| vuex-persistedstate | 需要自动同步的复杂状态 | 优雅但需引入额外依赖 |
| Cookie | 需要服务端读取或SSR项目 | 注意安全性和容量限制 |
最后提醒大家：前端存储永远不可信！ 所有关键权限校验必须走后端接口。
如果你有更好的方案，欢迎在评论区交流～ 下次我会分享《Vue3中Pinia的持久化方案》，感兴趣的话点个赞关注一下吧！
⭐ 写在最后
请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
✅ 对于文章中部分内容不理解
✅ 解答我文章中一些疑问
✅ 认为某些交互,功能需要优化,发现BUG
✅ 想要添加新功能,对于整体的设计,外观有更好的建议
✅ 一起探讨技术加qq交流群：906392632
最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧！
