关于vuex状态刷新网页时数据被清空问题及解决

目录

• vuex状态刷新网页时数据被清空问题
• vuex状态在页面刷新时,会清空状态的解决

vuex状态刷新网页时数据被清空问题

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))
    })
  }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。