vuex状态刷新网页时数据被清空
不过期的约定 人气:0vuex状态刷新网页时数据被清空问题
vuex状态管理,在网页刷新数据被清空的解决方法。
在main.js中写入下面的代码段(亲测有效)
//刷新保存状态 if (sessionStorage.getItem("store")) { store.replaceState( Object.assign( {}, store.state, JSON.parse(sessionStorage.getItem("store")) ) ); sessionStorage.removeItem("store") } //监听,在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload", () => { sessionStorage.setItem("store", JSON.stringify(store.state)); });
vuex状态在页面刷新时,会清空状态的解决
store写入的state在页面刷新时会被清空,这时可以用sessionStorage缓存状态。因为localStorage会永久保存数据,只有用户手动清除的时候才会清除。cookie存储内存只有4k,并且始终在同源的http请求中携带。而sessionStorage在关闭浏览器页面时就会清空。
因为状态只会在刷新页面的时候清空,所以我们只需要去app.vue里面在页面刷新之前把store保存在sessionStorage里面。在页面加载时读取sessionStorage的值
由于浏览器存储时会自动把对象转换成字符串格式,且不具备转换对象的键和值为字符串的效果,只会转换为[object,object]。因此需要先将对象转换为json字符串存储,取出时再使用JSON.parse()方法转换为json对象。
app.vue
created () { // 在页面加载时读取sessionStorage if (sessionStorage.getItem('store')) { this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store')))) } // 在页面刷新时将store保存到sessionStorage里 window.addEventListener('beforeunload', () => { sessionStorage.setItem('store', JSON.stringify(this.$store.state)) }) }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容