Vuex页面刷新数据丢失的问题
2023-03-31 10:40:27 时间
为什么说刷新页面vuex的数据会丢失
刷新页面vuex的数据会丢失属于正常现象,(vuex的数据并不是弄丢了,而是初始化了,回到初始值,回到原点了).因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是浏览器的运行机制,那么堆栈里的数据自然就清空了。
解决办法?
方法一:
将state的数据保存在localstorage,sessionstorage或cookie中。
-
在app.vue的created方法中读取sessionstorage中的数据存储在store中,此时用vuex.store的replaceState方法,替换store的根状态
-
在beforeunload方法中将store.state存储到sessionstorage中。
export default {
name: 'app',
created () {
// 在页面加载时读取sessionStorage
if (sessionStorage.getItem('store')) {
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
}
// 在页面刷新时将store保存到sessionStorage里
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
}
}
方法二:
使用vuex-persistedstate,可以自动存储。
下载:
npm install --save vuex-persistedstate
使用:
在store.js中引入
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
//配置
plugins: [createPersistedState()]
})
默认的是存储到localStorage里的,我们也可以存到sessionStorage中,如:
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
//配置
plugins: [createPersistedState({
storage: window.sessionStorage
})]
})
总结
- Vuex只是在内存保存状态,刷新之后就会丢失,如果要持久化就要存起来。
- localStorage就很适合,提交mutation的时候同时存入localStorage,store中把值取出作为state的初始值即可。
- 这里有两个问题,不是所有状态都需要持久化;如果需要保存的状态很多,编写的代码就不够优雅,每个提交的地方都要单独做保存处理。这里就可以利用vuex提供的subscribe方法做一个统一的处理。甚至可以封装一个vuex插件以便复用。
- 类似的插件有vuex-persist、vuex-persistedstate,内部的实现就是通过订阅mutation变化做统一处理,通过插件的选项控制哪些需要持久化
相关文章
- 在React应用中使用Dexie.js进行离线数据存储
- PHP到MySQL数据查询过程概述
- 面试常问,工作常用的Redis持久化机制
- Redis 性能优化思路,写的非常好!
- C#客户端Redis服务器的分布式缓存
- PriorityQueue 是线性结构吗?90% 的人都搞错了!
- 面试题:什么是零拷贝技术?
- 大型.NET ERP系统的20条数据库设计规范
- 谷歌发布TF新工具:计算速度提升2倍,减少无效参数
- 带你如何从0到1构建一个稳定、高性能的Redis集群
- 解析大型.NET ERP系统 代码的坏味道
- Protobuf vs CBOR:新一代的二进制序列化格式
- 解析大型.NET ERP系统 20条数据库设计规范
- 8 张图带你了解大型应用架构演进历程
- Java Mybatis 框架入门教程
- 解密双十一剁手党制造的数据背后的阿里技术
- 谈谈小数的表示方法之定点数
- Redis 的 8 大数据类型,写得非常好!
- PHP实现最简单的聊天室应用
- 25年前,开发者如何将游戏塞进内存?