解决Vuex在页面刷新后state数据被清除的问题

产生原因

JavaScript代码是运行在内存中的,代码运行时的所有变量、函数,也都是保存在内存中的。刷新页面,以前申请的内存被释放,重新加载脚本代码,变量重新赋值,所以这些数据要想存储就必须存储在外部,例如:Local Storage、Session Storage、IndexDB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。

解决办法

HTML5提供了两种在客户端存储数据的新方法:

  • localStorage:没有时间限制的数据存储
  • sessionStorage:针对一个session的数据存储

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

localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器关闭时会话结束,有时间期限

这里使用sessionStorage,需要注意的是Vuex中的变量是响应式的,而sessionStorage不是,当你改变Vuex中的状态,组件会监测到改变,而sessionStorage不会,页面需要重新刷新才可以看到变化,所以应让Vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化

具体实现

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

mutations.js

1
2
3
4
5
6
7
8
9
10
11
12
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.js

1
2
3
4
5
6
7
isLogin (state) {
if (!state.isLogin) {
state.isLogin = sessionStorage.getItem('isLogin'); //从sessionStorage中读取状态
state.username = sessionStorage.getItem('username');
}
return state.username
}

总体的实现思路是让Vuex中的状态和sessionStorage保持一致(从sessionStorage取值)

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :