解决vuex的数据刷新(F5)后会被初始化的问题
介绍一个vuex的数据刷新(F5)后会被初始化的问题处理的插件:vuex-localstorage
实现的原理大概就是监听浏览器的刷新,关闭事件,把vuex的值存储到本地localstorage,刷新完成后再把本地存储的值赋值会到vuex,并把本地清空,所以对应监听浏览器页面的加载,关闭,刷新事件很有必要呢
原作者的文章地址:http://udn.yyuap.com/forum.php?mod=viewthread&tid=96309
页面加载时只执行onload
页面关闭时只执行onunload
页面刷新时先执行onbeforeunload,然后onunload,最后onload。
结论是:
//对于ie,谷歌,360:
//页面加载时只执行onload
//页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件。
//页面关闭时,先onbeforeunload事件,再onunload事件。
//对于火狐:
//页面刷新时,只执行onunload;页面关闭时,只执行onbeforeunload事件
可以自己去体验一下额
created(){
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
//要保存到本地的数据
...
})
}
解决vuex的数据刷新(F5)后会被初始化的问题的更多相关文章
- 解决Vuex持久化插件-在F5刷新页面后数据不见的问题
页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionSt ...
- vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...
- 如何解决vuex因浏览器刷新数据消失,保持数据持久化问题?
vuex的一个全局状态管理的插件,但是在浏览器刷新的时候,内存中的state会释放.通常的解决办法就是用本地存储的方式保存数据,然后再vuex初始化的时候再赋值给state,此过程有点麻烦.因此可以使 ...
- 解决vuex在页面刷新后数据丢失的问题
一.原因 js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的. 刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Loc ...
- 解决sqlite删除数据或者表后,文件大小不变的问题
原因分析: sqlite采用的是变长纪录存储,当你从Sqlite删除数据后,未使用的磁盘空间被添加到一个内在的"空闲列表"中用于存储你下次插入的数据,用于提高效率,磁盘空间并没有丢 ...
- vuex防止数据刷新数据刷掉
replaceState replaceState(state: Object) 替换store的根状态,仅用状态合并或者时光旅行调试 // 在页面加载时读取localStorage里的状态信息 if ...
- 如何解决SWAT模型数据移动目录后出现的“SWAT2005.mdb database specified in your MasterProgress table does not exists. Please correct and try again”的问题
方法: 1.用MS Access软件打开SWAT模型工程文件的数据文件,如“**流域模拟.mdb”,该文件一般存放在工程文件“**流域模拟.mxd”相同的路径: 2.打开以后,找到“MasterPro ...
随机推荐
- 【RT-Thread】线程的基本知识
什么是线程? 人们在生活中处理复杂问题时,惯用的方法就是分而治之,即把一个大问题分解成多个相对简单.比较容易解决的小问题,小问题逐个被解决了,大问题也就随之解决了.同样,在设计一个较为复杂的应用程序时 ...
- 基于vue组件,发布npm包
亲测好用,如出错,请留言 1.项目初始化 使用vue脚手架创建,但vuecli太重,我们使用简单的工程脚手架进行处理,输入命令 vue init webpack-simple my-project n ...
- PHP each
1.函数的作用:遍历数组元素 2.函数参数: @params array &$array 3.例子: <?php $arr = ['Boy','Girl']; while(list($k ...
- 2019年高级Java程序员面试题汇总
目录 JDK Dubbo Zookeeper Strut2 Spring系列 Redis系列 Mysql系列 Java多线程 消息中间件 线程池 事物 JVM 设计模式 其他 程序设计 基础知识 编程 ...
- POJ 3080 Blue Jeans(串)
题目网址:http://poj.org/problem?id=3080 思路: 以第一个DNA序列s为参考序列,开始做以下的操作. 1.将一个字母s[i]作为匹配串.(i为当前遍历到的下标) 2.遍历 ...
- MS08-067 远程执行代码 漏洞复现
漏洞编号:MS08-067 披露日期: 2008/10/22 受影响的操作系统:Windows 2000;XP;Server 2003;Server 2008; 目标系统 Microsoft(R) ...
- CCBPM工作流系统中如何在特定的一个步骤,调用起另外一条流程
关键词: 工作流快速开发平台 工作流设计 业务流程管理 asp.net 开源工作流bpm工作流系统 java工作流主流框架 自定义工作流引擎 需求描述: 1, 操作员在操作最后一个节点时, ...
- Linux系统 /etc目录下主要配置文件解释
这些都是比较有实用性的系统配置,收藏下,以备不时之需!以下是etc下重要配置文件解释: 1./etc/hosts #文件格式: IPaddress hostname aliases #文件功能: 提 ...
- Redux的核心概念,实现代码与应用示例
Redux是一种JavaScript的状态管理容器,是一个独立的状态管理库,可配合其它框架使用,比如React.引入Redux主要为了使JavaScript中数据管理的方便,易追踪,避免在大型的Jav ...
- Spring Cloud Feign初接触
最近想使用下Feign,然后简单了解了一下,简单的搭了个demo. 首先简单介绍一下Feign,它是一个Http请求客户端,类似HttpClient,具体里面实现还没去看,知道它是一个请求客户端就行, ...