介绍一个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. DJango配置mysql数据库以及数据库迁移

    DJango配置mysql数据库以及数据库迁移 一.Django 配置MySQL数据库 在settings.py中配置 import pymysql # 配置MySQL pymysql.install ...

  2. 攻防世界(XCTF)WEB(进阶区)write up(一)

      cat ics-05 ics-06 lottery Cat XCTF 4th-WHCTF-2017 输入域名  输入普通域名无果  输入127.0.0.1返回了ping码的结果 有可能是命令执行 ...

  3. 浏览器渗透框架BeEF使用笔记(二)

    0x03 常用模块 1-信息收集 可以收集到例如 浏览器名称版本 浏览器用户版本 插件(包括Java,ActiveX,VBS,Flash……) 窗口大小 1)details面板收集 (2)插件收集信息 ...

  4. GDAL集成对KML文件的支持

    目录 1. 正文 1.1. 编译LibKML 1.1.1. 第三方库支持 1.1.2. 编译错误 1.2. 配置GDAL 1.3. 链接问题 2. 参考 1. 正文 GDAL可以支持将KML作为矢量文 ...

  5. QLable 显示图片

    1,各种对就是不显示,因为路径中有其它符号如\n\r什么的 QStringList FileOpeartion::PathCombine (const QString strPath, QString ...

  6. 基于 HTML5 + WebGL 的 3D 可视化挖掘机

    前言 在工业互联网以及物联网的影响下,人们对于机械的管理,机械的可视化,机械的操作可视化提出了更高的要求.如何在一个系统中完整的显示机械的运行情况,机械的运行轨迹,或者机械的机械动作显得尤为的重要,因 ...

  7. Eureka -- 浅谈Eureka

    目录: 一:Eureka介绍 二:Eureka架构图 三:Eureka组件 四:Eureka作用 五:Eureka和Zookeeper对比 什么是Eureka 引入SpringCloud中文文档介绍 ...

  8. 音视频入门-12-手动生成一张PNG图片

    * 音视频入门文章目录 * 预热 上一篇 [PNG文件格式详解]详细介绍了 PNG 文件的格式. PNG 图像格式文件由一个 8 字节的 PNG 文件署名域和 3 个以上的后续数据块(IHDR.IDA ...

  9. 算法随笔-二叉树遍历的N种姿势

    最近在练习用Python刷算法,leetcode上刷了快300题.一开始怀疑自己根本不会写代码,现在觉得会写一点点了,痛苦又充实的刷题历程.对我这种半路出家的人而言,收获真的很大. 今天就从二叉树遍历 ...

  10. java中的Static、final、Static final各种用法详解

    前言 对Static.final.Static final这几个关键词熟悉又陌生?想说却又不知怎么准确说出口?好的,本篇博客文章将简短概要出他们之间的各自的使用,希望各位要是被你的面试官问到了,也能从 ...