vuex中刷新页面数据丢失问题

一、原因

  js代码是运行在内存中的,代码运行时的所有变量、函数也都是保存在内存中的。

  刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。具体选择哪一个就根据你实际需求来选择。

二、解决方案

  在客户端存储数据:

  HTML5提供了2种在客户端存储数据的新方法:localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限,具有自行百度。

  之前,这些都是由cookie完成的,但是cookie不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢,而且效率不高。

  web存储分为localStorage个sessionStorage。

vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化

总体的实现思路是让vuex中store的状态从sessionStorage取值,并和sessionStorage保持一致


需要注意的是state里的userInfo初始化一定要是null,而不是{},否则那个判断就一直为true啦(个人遇到的一个小问题)

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容