zoukankan      html  css  js  c++  java
  • 前端 vue单页面应用刷新网页后vuex的state数据丢失的解决方案(转载)

    最近接手了一个项目,前端后端都要做,之前一直在做服务端的语言、框架和环境,前端啥都不会啊。

    突然需要前端编程,两天速成了JS和VUE框架,可惜还是个半吊子。然后遇到了一个困扰了一整天的问题。一直调试都没办法解决。

    最后找到一个极好的解决思路解决了问题。https://blog.csdn.net/guzhao593/article/details/81435342

    遇到的问题:

    由于vue框架设计出来的APP实际上全部设置在同一个html上,跳转是通过路由实现的,

    所以,有的控件并不会在跳转时刷新,如果有数据存放在session中,没办法保证没有刷新的控件能及时更新属性值。除非手动F5。

    vuex的的作用就是设置一个store,来管理这些需要动态更新的数据。

    控件通过computed的绑定,可以保证在store中的数据更新后,控件上对应的数据及时更新。

    但是,store的数据是保存在内存中的,当手动F5时,页面会重新加载vue实例,store的数据就全部恢复初始值了,这样就会出现数据丢失的问题。

    解决思路:

    将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie)中,刷新后重新从本地存储中读取出来,恢复现场。

    解决过程:
    首先得选择合适的客户端存储

    localStorage是永久存储在本地,除非你主动去删除;

    sessionStorage是存储到当前页面关闭为止;

    cookie则根据你设置的有效时间来存储,但缺点是不能储存大数据且不易读取。

    我选择的是sessionStorage,选择的原因vue是单页面应用,操作都是在一个页面跳转路由,另一个原因是sessionStorage可以保证打开页面时sessionStorage的数据为空,而如果是localStorage则会读取上一次打开页面的数据。

    因为我们是只有在刷新页面时才会丢失store里的数据,那我们可以在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面。

    beforeunload这个事件在页面刷新时先触发的。我们把这个事件放在app.vue这个入口组件中,这样就可以保证每次刷新页面都可以触发。

    具体的代码如下:

    created() {
        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));
        });
      }
  • 相关阅读:
    python模块之cx_Oracle
    python模块之xml.etree.ElementTree
    CentOS7.4 安装 oracle12c
    Markdown语法整理
    ansible command模块将返回值写入变量
    pip安装模块时:error: command 'gcc' failed with exit status 1
    The hub and spoke model 轮辐模型/辐射模型
    ActiveMQ-Network of brokers集群模式
    ansible安装配置及最佳实践roles
    ansible报错Aborting, target uses selinux but python bindings (libselinux-python) aren't installed
  • 原文地址:https://www.cnblogs.com/axiangcoding/p/11013565.html
Copyright © 2011-2022 走看看