解决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",()=>{
    //要保存到本地的数据     ... }) }

 

posted @ 2018-11-12 16:17  mei1234!  阅读(2999)  评论(0编辑  收藏  举报