解决刷新页面数据丢失问题及退出登录清空数据
记录自己遇到的问题,以备查询。使用VUEX来统一管理数据状态在APP.vue中加入如下代码,目的是将vuex里的信息保存到sessionStorage里//任何页面F5刷新都会执行APP.vue中的生命周期函数//说明:登录登路由为/logincreated () {//判断当前路由是否是登录路由,//如果不是,则认为是在非登录界面刷新,将store中的数据保存到sessionS...
·
记录自己遇到的问题,以备查询。
使用VUEX来统一管理数据状态
在APP.vue中加入如下代码,目的是将vuex里的信息保存到sessionStorage里
//任何页面F5刷新都会执行APP.vue中的生命周期函数
//说明:登录登路由为/login
created () {
//判断当前路由是否是登录路由,
//如果不是,则认为是在非登录界面刷新,将store中的数据保存到sessionStorage中
if(this.$router.currentRoute.path != "/login"){
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
}else{
//否则清空sessionStorage中的数据
sessionStorage.clear()
}
}
值得注意的一点是:
项目中的所有跳转至登录路由时,
不能使用this.$router.push(’/login’)
这种方式跳转,原因是这种方式不会触发APP.vue中的created函数,所以无法清空sessionStorage中的store数据;
window.location.replace("/login")
这种方式;跳转至登录路由时会触发APP.vue中的created函数,达到清空sessionStorage中的store数据的效果
更多推荐
已为社区贡献2条内容
所有评论(0)