vuex刷新页面数据丢失怎么解决


当前第2页 返回上一页

82ee0cbf5b7cf218f8ce43004b098f6.png

在菜单页面监听vuex中菜单数据

0d21f4fe47b5a44fcf33031622c4eb0.png

页面刷新的解决方案:

页面刷新的时候异步请求后台数据,然后动态更新vuex中的数据,其中会有一种情况就是,网络延迟、数据量大的问题。此时还没等vuex获取到后台返回的数据,页面就已经加载完成了,这样就会造成数据丢失。所以该解决方案就是,监听浏览器刷新前事件,在浏览器刷新之前就把vuex里的数据保存至sessionStorage中,刷新成功后如果异步请求的数据还没返回则直接获取sessionStorage里的数据,否则获取vuex里的数据。(只有刷新后还没取到后台数据,才会从sessionStorage里取。确保数据的安全性,就算获取sessionStorage里的数据也是安全的,因为每次刷新都会重新赋值,不必担心数据被篡改问题,其次就是对sessionStorage里的数据做了加密操作)

在父页面向后台请求数据,并且监听浏览器刷新前事件,将vuex数据保存至sessionStorage

4ebd473e979c13efd8a4f2f9a3af8be.png

在父页面向后台请求数据,将返回的数据分发至vuex

b16c63ea3387d0244b3acf55ca8188a.png

以上就是vuex刷新页面数据丢失怎么解决的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

vuex中映射的完整指南

vuex的五个属性是什么

vuex中mutations怎么理解?怎么用?

vuex中常用知识点(总结)

vuex中mutations修改状态操作下详解

vue.js如何安装vuex

什么时候使用vuex

vuex有什么用?

vuex是什么

vuex使用场景是什么

更多相关阅读请进入《vuex》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...