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

川长思鸟来 2023-07-23 14:55 68阅读 0赞

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

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

//第一种方法
          // 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][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关闭）**

[20200408105827919.png]: /images/20230528/0f98cf800fa244e492c68fcd0f275a26.png
[https_developer.mozilla.org_en-US_docs_Web_API_PerformanceNavigation_type]: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation/type