解决vuex在页面刷新后数据丢失的问题

1、缘由

　　js代码是运行在内存中的，代码运行时的全部变量、函数也都是保存在内存中的。

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

2、解决方案

　　在客户端存储数据：

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

　　以前，这些都是由cookie完成的，可是cookie不适合大量数据的存储，由于它们由每一个对服务器的请求来传递，这使得cookie速度很慢，并且效率不高。

　　web存储分为localStorage个sessionStorage。

　　区别在于存储的有效期和做用域不一样。

　　经过localStorage存储的数据是永久性的，除非web应用刻意删除存储的数据，或者用户经过设置浏览器配置（浏览器提供的特定的UI）来删除，不然数据将一直保存在用户的电脑上，永不过时。

　　localStorage的做用域是限定在文档源级别的。同源的文档间共享一样的localStorage数据（不论该源的脚本是否真正的访问localStorage）。他们能够互相读取对方的数据，甚至能够覆盖对方的数据。可是，非同源的文档间互相都不能读取或者覆盖对方的数据。（即便他们运行的脚本是来自同一台第三方的服务器也不行）。

　　sessionStorage存储数据的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是同样的，一旦窗口或者标签页被永久关闭了，那么全部经过sessionStorage存储的数据也都被删除了。

　　我这里使用sessionStorage，这里须要注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要从新刷新才能够看到改变，因此应让vuex中的状态从sessionStorage中获得，这样组件就能够响应式的变化

3、具体实现

　　应用背景是用户登入后保存状态，退出后移除状态

//mutations
ADD_LOGIN_USER (state,data) {  //登入，保存状态 
    sessionStorage.setItem("username", data);  //添加到sessionStorage 
    sessionStorage.setItem("isLogin",true); state.username=data,             //同步的改变store中的状态 
    state.isLogin=true }, SIGN_OUT (state) { //退出，删除状态 
    sessionStorage.removeItem("username");  //移除sessionStorage 
    sessionStorage.removeItem("isLogin"); state.username=''                //同步的改变story中的状态 
    state.isLogin=false }

//getters
isLogin (state) { if (!state.isLogin) { state.isLogin=sessionStorage.getItem('isLogin');   //从sessionStorage中读取状态 
        state.username=sessionStorage.getItem('username'); } return state.isLogin }

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

getters:{ userInfo(state){ if(!state.userInfo){ state.userInfo = JSON.parse(sessionStorage.getItem('userInfo')) } return state.userInfo } }, mutations:{ LOGIN:(state,data) => { state.userInfo = data; sessionStorage.setItem('userInfo',JSON.stringify(data)); }, LOGOUT:(state) => { state.userInfo = null; sessionStorage.removeItem('userInfo'); } },

　　须要注意的是state里的userInfo初始化必定要是null，而不是{}，不然那个判断就一直为true啦（我的遇到的一个小问题）