解决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
},sessionstorage和localstorage
SIGN_OUT (state) {  //退出，删除状态
state.username=''                //同步的改变story中的状态
state.isLogin=false
}
//getters
isLogin (state) {
if (!state.isLogin) {
state.Item('isLogin');  //从sessionStorage中读取状态
state.Item('username');
}
return state.isLogin
}
总体的实现思路是让vuex中store的状态从sessionStorage取值，并和sessionStorage保持⼀致
getters:{
userInfo(state){
if(!state.userInfo){
state.userInfo = JSON.Item('userInfo'))
}
return state.userInfo
}
},
mutations:{
LOGIN:(state,data) => {
state.userInfo = data;
sessionStorage.setItem('userInfo',JSON.stringify(data));
},
LOGOUT:(state) => {
state.userInfo = null;
}
},
需要注意的是state⾥的userInfo初始化⼀定要是null，⽽不是{}，否则那个判断就⼀直为true啦（个⼈遇到的⼀个⼩问题）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。