解决vuex刷新页面数据丢失
1、前言
vue构建的项目中,vuex的状态存储是响应式的,当vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会得到高效刷新,问题来了,vuex存储的数据只是在页面中,相当于我们定义的全局变量,刷新之后,里面的数据就会恢复到初始化的状态。比如,用户已经登录了,我把登录状态放到state中了,一刷新页面,还要重新登录?购物车里的添加的数据,一刷新要重新添加?
2、使用场景
vuex存取值一般都是放在computed计算属性中,但是一刷新页面的数据就没了
3、思路
监听页面是否刷新,如果页面刷新了,将state对象存入到sessionStorage/localStorage中。页面打开之后,判断sessionStorage/localStorage中是否存在state对象,如果存在,则说明页面是被刷新过的,将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在,说明是第一次打开,则取vuex中定义的state初始值。
4、代码实现
//全局监听,页面刷新的时候将store里state的值存到sessionStorage中,然后从sessionStorage中获取,再赋值给store。然后再把session里面存的删除即可,相当于中间件的作用。
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store")) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
sessionStorage.removeItem("store")
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
解决vuex刷新页面数据丢失的更多相关文章
- 解决Vuex刷新页面数据丢失问题 ---- vuex-persistedstate持久化数据
何为Vuex?用处是什么?为什么刷新丢失? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 ...
- 24、vuex刷新页面数据丢失解决办法
刷新页面时候将state数据保存到localStorage里面: export default { name: 'App', created () { //在页面加载时读取localStorage里的 ...
- 用混入的方法引入vuex,并且解决vuex刷新页面值丢失的问题
前段时间,做了个官网项目,客户要求将首页的域名后面的参数去除干净,然后就把#去掉了,一转脸,客户让去掉子页面地址栏上的参数,这很棘手,因为子页面的内容是根据子页面地址栏上的参数而定的,如果要去掉这些参 ...
- 解决vuex在页面刷新后数据丢失的问题
一.原因 js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的. 刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Loc ...
- vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...
- 解决 Vue 刷新页面后 store 数据丢失的问题
原来的状态(页面刷新数据会重置) state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } }, ...
- 10.解决VUEX刷新的时候出现数据消失
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
随机推荐
- 结构化编程-Structured programming
结构话编程强调的是对流程的控制: 它为面向过程编程提供天然的支持. Structured programming is a programming paradigm aimed at improvin ...
- CorelDRAW X8制作金属质感3D立体按钮
本教程教您使用CorelDRAW X8制作金属质感3D立体按钮.绘图中主要应用渐变填充技巧为立体按钮表现物体质感和丰富的色彩变化,最后实现的效果也是不错的,是很实用的案例,教程难度一般,完成图如下: ...
- 工作需求——VBA操作打印机
因为最近做的事情比较多,平时也多用EXCEL,所以顺便学习EXCEL的功能性的东西 转载:https://msdn.microsoft.com/zh-tw/vba/excel-vba/articles ...
- css——导航栏
导航栏一般用无序列表制作 但出来的导航栏有黑点,还有一些边距 去除黑点我们可以用:list-style-type: none;/*去掉ul前面的点*/ 因为有些标签之间会有默认的边距,所以可以先将边踞 ...
- 01 C#基础
第一天 .net平台(中国移动互联网平台): .net框架(信号塔): CLR(公共语言运行时) .Net类 库 我们使用的语言是——C# 2.解决方案项目与类的关系: 解决方案:公司 项目:部门 类 ...
- js获取路径参数对象
/** * 获取页面路径参数值 */ function getParams(key) { var result = {}; var paramStr = encodeURI(window.docume ...
- tensorflow的tf.train.Saver()模型保存与恢复
将训练好的模型参数保存起来,以便以后进行验证或测试.tf里面提供模型保存的是tf.train.Saver()模块. 模型保存,先要创建一个Saver对象:如 saver=tf.train.Saver( ...
- java.lang.NoClassDefFoundError: org/apache/commons/collections4/ListValuedMap
最近在使用java PiO导入导出Excle在windos本机上运行没有问题: 但是!!问题来了!放到Linux服务器上部署后出现异常 java.lang.NoClassDefFoundError: ...
- vue文件目录结构
使用node和npm环境,很容易搭建起一个vue环境.搭建完成以后,项目基本结构,如下图所示: 1.build: bulid文件夹保存的是一些webpack的初始化配置 2.config: confi ...
- python hashlib、configparse、logging
一.hashlib 1.Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 2.摘要算法 通过摘要函数f()对任意长度的数据data计算出固定长度的摘要digest,目 ...