介绍一个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)后会被初始化的问题的更多相关文章

  1. 解决Vuex持久化插件-在F5刷新页面后数据不见的问题

    页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionSt ...

  2. vue 使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  3. 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题

    通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...

  4. 使用sessionStorage解决vuex在页面刷新后数据被清除的问题

    https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...

  5. 如何解决vuex因浏览器刷新数据消失,保持数据持久化问题?

    vuex的一个全局状态管理的插件,但是在浏览器刷新的时候,内存中的state会释放.通常的解决办法就是用本地存储的方式保存数据,然后再vuex初始化的时候再赋值给state,此过程有点麻烦.因此可以使 ...

  6. 解决vuex在页面刷新后数据丢失的问题

    一.原因 js代码是运行在内存中的,代码运行时的所有变量.函数也都是保存在内存中的. 刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Loc ...

  7. 解决sqlite删除数据或者表后,文件大小不变的问题

    原因分析: sqlite采用的是变长纪录存储,当你从Sqlite删除数据后,未使用的磁盘空间被添加到一个内在的"空闲列表"中用于存储你下次插入的数据,用于提高效率,磁盘空间并没有丢 ...

  8. vuex防止数据刷新数据刷掉

    replaceState replaceState(state: Object) 替换store的根状态,仅用状态合并或者时光旅行调试 // 在页面加载时读取localStorage里的状态信息 if ...

  9. 如何解决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 ...

随机推荐

  1. Mac部署hadoop3(伪分布式)

    环境信息 操作系统:macOS Mojave 10.14.6 JDK:1.8.0_211 (安装位置:/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jd ...

  2. Bran的内核开发教程(bkerndev)-01 介绍

    介绍   内核开发不是件容易的事,这是对一个程序员编程能力的考验.开发内核其实就是开发一个能够与硬件交互和管理硬件的软件.内核也是一个操作系统的核心,是管理硬件资源的逻辑.   处理器或是CPU是内核 ...

  3. nginx::升级到最新nginx

    ubuntu16. 升级nginx到最新版本 wget http://nginx.org/keys/nginx_signing.key sudo apt-key add nginx_signing.k ...

  4. php分页的条件

    我们在项目开发的过程中避免不了使用分页功能,拿php来说,现在市面上有很多大大小小的php框架,当然了分页这种小功能这些框架中都是拿来直接可以用的. 这些框架的分页功能使用都很方便,配置一下分页所需参 ...

  5. eclipse安装相关

    一 安装相关 1.下载eclipse(这里我下载了个简单版本) https://www.eclipse.org/downloads/packages/

  6. 阿里巴巴开源故障注入工具_chaosblade

    chaosblade是阿里巴巴最近开源的一款故障注入的工具,因为我最近在做公司的虚拟化平台的可靠性测试工具,无意中发现这个工具,个人感觉比较有用,用起来也比较简单,所以拿出来分享一下,期望对大家的工作 ...

  7. Java基础(42)AbstractSet类

    AbstractSet类的子类有HashSet(其子类是LinkedHashSet).EnumSet.TreeSet 1.HashSet public class HashSet<E> e ...

  8. Java基础(八)对象包装器与自动装箱

    1.对象包装器 有时候,需要将int这样的基本类型转换为对象.所有的基本类型都有一个与之对应的类.通常,这些类被称为包装器(wrapper). 这些对象包装类分别是:Integer.Long.Floa ...

  9. node.js的File模块

    1.Node.js是什么? (1) Nodejs是为了开发高性能的服务器而诞生的一种技术 (2) 简单的说 Node.js 就是运行在服务端的 JavaScript,基于V8进行运行 (3) Node ...

  10. 如何让多个不同类型的后端网站用一个nginx进行反向代理实际场景分析

    前段时间公司根据要求需要将聚石塔上服务器从杭州整体迁移到张家口,刚好趁这次机会将这些乱七八糟的服务器做一次梳理和整合,断断续续一个月迁移完成 大概优化掉了1/3的机器,完成之后遇到了一些问题,比如曾今 ...