介绍一个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. drf源码save以及response

    drf源码save以及response 一.save 其中蛮重要的一段 if self.instance is not None: self.instance = self.update(self.i ...

  2. RF作用与目的

    robotframework自动化原理:通过ride工具编写脚本,加载指定的UI测试库,再通过pybot程序去运行指定脚本,调用浏览器驱动,打开浏览器,操作浏览器页面元素,达到模拟用户操作的行为 为什 ...

  3. libevent环境搭建

    环境 VS2017.ubuntu16.04  官网网址:http://www.linuxfromscratch.org/blfs/view/svn/basicnet/libevent.html 下载 ...

  4. tomcat+Apache介绍

    tomcat不是一个完整意义上的Jave EE服务器,它甚至都没有提供对哪怕是一个主要Java EE API的实现:但由于遵守apache开源协议,tomcat却又为众多的java应用程序服务器嵌入自 ...

  5. 该虚拟机似乎正在使用中。 如果该虚拟机未在使用,请按“获取所有权(T)”按钮获取它的所有权。否则,请按“取消(C)”按钮以防损坏。 配置文件: ***.vmx。

    打开虚拟机的时候,出现这样的问题: 该虚拟机似乎正在使用中.  如果该虚拟机未在使用,请按“获取所有权(T)”按钮获取它的所有权.否则,请按“取消(C)”按钮以防损坏.  配置文件: D:\VM\wi ...

  6. Java IO编程——字符流与字节流

    在java.io包里面File类是唯一 一个与文件本身有关的程序处理类,但是File只能够操作文件本身而不能够操作文件的内容,或者说在实际的开发之中IO操作的核心意义在于:输入与输出操作.而对于程序而 ...

  7. django-URL反向解析Reverse(九)

    解决path中带参数的路径. reverse(viewname,urlconf=None,args=None,Kwargs=None,current_app=None) book/views.py f ...

  8. C语言知识体系

    吾尝终日而思矣,不如须臾之所学也: 吾尝跂而望矣,不如登高之博见也. 登高而招,臂非加长也,而见者远: 顺风而呼,声非加疾也,而闻者彰. 假舆马者,非利足也,而致千里: 假舟楫者,非能水也,而绝江河. ...

  9. 漏洞靶场--webug4.0安装

    官网:https://www.webug.org/ 官方版本里安装视频教程 7.19官网打不开,分享当初存在网盘的[7.1更新] 链接: https://pan.baidu.com/s/1F3658i ...

  10. ThinkCMF 框架上的任意内容包含漏洞

    0x01  背景 ThinkCMF是一款基于PHP+MYSQL开发的中文内容管理框架,底层采用ThinkPHP3.2.3构建. ThinkCMF提出灵活的应用机制,框架自身提供基础的管理功能,而开发者 ...