Vuex页面刷新数据不丢失的几种解决方案
作者：江城开朗的豌豆
相信很多用Vuex做状态管理的同学都遇到过这个问题——明明登录成功了,一刷新页面又跳回登录页；购物车里的商品,刷新后全空了,今天我就来分享几种解决方案,帮你彻底搞定这个烦人的问题
大家好。今天想和大家聊聊一个Vue项目中经常遇到的坑：用Vuex存储的数据，一刷新页面就没了！
相信很多用Vuex做状态管理的同学都遇到过这个问题——明明登录成功了，一刷新页面又跳回登录页；购物车里的商品，刷新后全空了。今天我就来分享几种解决方案，帮你彻底搞定这个烦人的问题。
一、为什么Vuex数据会丢失？
先搞清楚原理：Vuex的数据是存在内存中的。这就意味着：
- 页面刷新 → 浏览器重新加载 → JavaScript内存重置 → Vuex数据清空
所以要想持久化数据，我们必须把数据存到“不会轻易丢失”的地方。常见的有三种方案：
二、解决方案1：localStorage/sessionStorage（简单粗暴）
这是最直接的方案，在Vuex数据变化时同步到Storage：
// 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（优雅推荐）
如果你不想自己写存储逻辑，可以用这个现成插件：
npm install vuex-persistedstate
// 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
进阶配置：
createPersistedState({
storage: {
getItem: key => uni.getStorageSync(key), // 小程序兼容方案
setItem: (key, value) => uni.setStorageSync(key, value),
removeItem: key => uni.removeStorageSync(key)
}
})
四、解决方案3：Cookie（适合配合SSR）
如果需要和后端交互（比如自动带token），可以用Cookie存储：
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、基础信息）
敏感信息处理：
// 错误示范！存了密码明文
localStorage.setItem('password', '123456')
// 正确做法：只存token
localStorage.setItem('token', '加密后的字符串')
定期清理：设置合理的过期时间
大对象慎存：可能影响页面加载性能
六、终极方案：组合拳
在我的实际项目中，通常会这样搭配使用：
- 用户token → Cookie存储（方便SSR和HTTP自动携带）
- 用户基础信息 → localStorage + Vuex（减少接口请求）
- 临时数据 → 纯Vuex（如表单填写状态）
七、总结
| 方案 | 适用场景 | 一句话评价 |
|---|---|---|
| localStorage | 需要长期存储的简单数据 | 简单但需手动同步 |
| vuex-persistedstate | 需要自动同步的复杂状态 | 优雅但需引入额外依赖 |
| Cookie | 需要服务端读取或SSR项目 | 注意安全性和容量限制 |
最后提醒大家：前端存储永远不可信！ 所有关键权限校验必须走后端接口。
写在最后
到此这篇关于Vuex页面刷新不丢失的几种解决方案的文章就介绍到这了,更多相关Vuex页面刷新不丢失内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！