vue判断刷新——解决vue项目刷新情况下的数据同步的设计思路

最新推荐文章于 2024-08-01 16:30:03 发布

MusiCoder32

最新推荐文章于 2024-08-01 16:30:03 发布

阅读量709

点赞数

CC 4.0 BY-SA版权

文章标签： web

本文链接：https://blog.csdn.net/weixin_42129248/article/details/105381978

本文探讨了前端页面加载策略，特别是在系统、房间、设备、安全等模块的加载过程中，如何优化用户体验，避免数据重复加载及刷新导致的数据丢失。提出了通过Vuex存储数据并在header组件中请求加载的方法，同时讨论了利用loading指示符区分首次加载与刷新状态的技术细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录构思过程
整个页面结构如下图所示，分为四个板块：系统、房间、设备、安全。登陆成功会进入系统页
在这里插入图片描述

为了优化体验，所有数据在所有页面都会共用的header组件中请求加载，并存入vuex；即当登陆成功后，用户还停留在系统页时，程序已经在请求加载房间、设备、安全相关的数据。
该方案存在一个问题，当在其他页面（非系统页面）做刷新时，由于vuex会被清空，故在不处理的情况下，会看到当前页面数据空白，也看到有人把数据存在localstorage中，但有个问题是，刷新就是为了取最新数据，如果取localstorage中存好的数据，则失去了刷新的意义；故采取加loading的方式。
现在的问题是，怎么判断loading如何开始，如何结束，如何区别是首次提前加载还是刷新状态下的加载。
先解决第一个问题，如何区别是首次提前加载还是刷新状态下的加载
先说搜索到的一些办法，判断刷新这个操作


      //第一种方法
      // if(window.name == ""){
      // console.log("首次被加载");
      // window.name = "isReload";  // 在首次进入页面时我们可以给window.name设置一个固定值 
      // }else if(window.name == "isReload"){
      // console.log("页面被刷新");
      // }
      //第二种方法
      if (window.performance.navigation.type == 1) {
        console.log("页面被刷新")
      }else{
        console.log("首次被加载")
      }

推荐第二种方法，关于window.performance.navigation.type的说明可以看mdn中的解释https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation/type

再说说我采取的办法

在header组件中每个请求方法前用this.$route.path.indexOf(arg)>-1还判断所在页面，如果是在当前页，那么使用 this.loading=this.$loading(obj) 来生成全局loading，在请求结束时再次通过this.$route.path.indexOf(arg)>-1来判断是否执行this.loaging.close();
什么意思呢，也就是说，在首次提前加载的情况下，由于不满足if条件，不会生成loding
如果是在非系统页面下进行刷新，则会生成loading；
执行关闭loading.close()时，也要用this.$route.path.indexOf(arg)>-1（防止其他页面将该loading关闭）