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啦（个人遇到的一个小问题）