使⽤sessionStorage解决vuex在页⾯刷新后数据被清除的
问题
1.原因
2.解决⽅法
localStorage没有时间期限，除⾮将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限，具有⾃⾏百度
我这⾥使⽤sessionStorage，这⾥需要注意的是vuex中的变量是响应式的，⽽sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，⽽sessionStorage就不会了，页⾯要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化
3.具体实现
应⽤背景是⽤户登⼊后保存状态，退出后移除状态
mutations.js
ADD_LOGIN_USER (state,data) { //登⼊，保存状态
sessionStorage.setItem("username", data); //添加到sessionStorage
sessionStorage.setItem("isLogin",true);
state.username=data,  //同步的改变store中的状态
state.isLogin=truesessionstorage和localstorage
},
SIGN_OUT (state) { //退出，删除状态
state.username=''  //同步的改变story中的状态
state.isLogin=false
}
getters.js
isLogin (state) {
if (!state.isLogin) {
state.Item('isLogin'); //从sessionStorage中读取状态
state.Item('username');
}
return state.username
}
总体的实现思路是让vuex中story的状态和sessionStorage保持⼀致（从sessionStorage取值）
4.后话
之前踩了⼀个⼤坑，没注意到vuex可以让组件响应式变化，让组件直接取了sessionStorage的值，弄的我还必须刷新才能看到退出后的效果。
补充：
下⾯看戏vuex存储和本地存储(localstorage、sessionstorage)的区别
1.最重要的区别：vuex存储在内存，localstorage则以⽂件的⽅式存储在本地
2.应⽤场景：vuex⽤于组件之间的传值，localstorage则主要⽤于不同页⾯之间的传值。
3.永久性：当刷新页⾯时vuex存储的值会丢失，localstorage不会。
注：很多同学觉得⽤localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共⽤⼀个数据源（对象或数组）时，如果其中⼀个组件改变了该数据源，希望另⼀个组件响应该变化时，localstorage⽆法做到，原因就是区别1。
总结
以上所述是⼩编给⼤家介绍的vuex在页⾯刷新后数据被清除问题的解决⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

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