返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于vuex状态刷新网页时数据被清空问题及解决
  • 835
分享到

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

2024-04-02 19:04:59 835人浏览 泡泡鱼
摘要

目录Vuex状态刷新网页时数据被清空问题vuex状态在页面刷新时,会清空状态的解决vuex状态刷新网页时数据被清空问题 vuex状态管理,在网页刷新数据被清空的解决方法。 在main

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

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

本文链接: https://lsjlt.com/news/165402.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 关于vuex状态刷新网页时数据被清空问题及解决
    目录vuex状态刷新网页时数据被清空问题vuex状态在页面刷新时,会清空状态的解决vuex状态刷新网页时数据被清空问题 vuex状态管理,在网页刷新数据被清空的解决方法。 在main...
    99+
    2024-04-02
  • 如何使用sessionStorage解决vuex在页面刷新后数据被清除的问题
    这篇文章主要介绍如何使用sessionStorage解决vuex在页面刷新后数据被清除的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.原因2.解决方法localStorage...
    99+
    2024-04-02
  • 如何解决页面刷新vuex数据消失的问题
    这篇文章主要为大家展示了“如何解决页面刷新vuex数据消失的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决页面刷新vuex数据消失的问题”这篇文章吧...
    99+
    2024-04-02
  • 关于vuex强刷数据丢失问题的解决方法
    这篇文章主要讲解了“关于vuex强刷数据丢失问题的解决方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“关于vuex强刷数据丢失问题的解决方法”吧!vuex-persistedstate核心...
    99+
    2023-06-14
  • 解决vue页面刷新vuex中state数据丢失的问题
    页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决。 1、lo...
    99+
    2024-04-02
  • vuex结合session存储数据解决页面刷新数据丢失问题
    目录前言一、原因:二、解决思路:1.本地存储方法:2.实现步骤:3.优化:前言 在项目中表单筛选项里,选择完之后刷新页面数据就变了,没有保留在自己选择的选项上。 在项目中是使用vue...
    99+
    2024-04-02
  • vuex页面刷新数据丢失问题的四种解决方式
    目录为什么说刷新页面vuex的数据会丢失第一种方法用sessionStorage第二种方法是 vuex-along示例如下第三种方法是 vuex-persistedstate示例如下...
    99+
    2024-04-02
  • 如何解决刷新页面vuex数据不消失和不跳转页面的问题
    小编给大家分享一下如何解决刷新页面vuex数据不消失和不跳转页面的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!先说点什么v...
    99+
    2024-04-02
  • Vue怎么解决router传递params参数在页面刷新时数据丢失问题
    本文小编为大家详细介绍“Vue怎么解决router传递params参数在页面刷新时数据丢失问题”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue怎么解决router传递params参数在页面刷新时数据丢...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作