浏览器刷新页面导致vuex数据丢失问题如何解决?
Vuex刷新页面数据丢失vuex的数据是存储在内存中的当刷新浏览器时,会将内存释放清空数据此时可借助浏览器的本地存储localStoragesessionStorage在App.vue中:<template><div><router-view></router-view></div></template><script&
·
Vuex刷新页面数据丢失
vuex的数据是存储在内存中的
当刷新浏览器时,会将内存释放清空数据,导致vuex中的数据丢失
此时可借助浏览器的本地存储
localStorage
sessionStorage
在App.vue中:
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
created(){
//在页面加载时读取sessionStorage里的状态信息
if(sessionStorage.getItem('storeState')){
//replaceState,替换store的根状态
this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem('storeState'))))
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener('beforeunload',()=>{
sessionStorage.setItem('storeState',JSON.stringify(this.$store.state))
})
}
}
</script>
更多推荐
已为社区贡献4条内容
所有评论(0)