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

 

转载于:https://www.cnblogs.com/mei1234/p/9946990.html