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

一、原因

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

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

二、解决方案

在客户端存储数据：

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中得到，这样组件就可以响应式的变化

三、具体实现

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

//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啦(个人遇到的一个小问题)