vue中定时刷新页面，更新数据（多个接口请求）

  • Z时代
  • 2024-02-26
  • 分类：IT

vue中定时刷新页面，更新数据（多个接口请求）

一个vue页面，我拆分成了好几个模块，每个模块中都会有接口请求，现在需求是定时刷新页面，获取新数据，如果用定时器的话，在每个模块中都加定时器吗？？这样有点不太好感觉，大家有什么思路吗
我考虑过路由跳转，重新跳进这个页面，但是在这个项目中不适合，还有其他思路吗

回答：

给你提供种思路：发布订阅者模式

1、在主页面暴露个定时刷新对象intervelRefreshObj，它就是个普通的对象，里面可以订阅事件，和发布事件；

2、在各个组件引入改对象，把需要刷新数据的接口方法，订阅到该对象；

3、再在主界面，定时触发“定时刷新对象”的发布，即可实现每个组件的实时刷新；

回答：

首先业务是不是无法改变。如果可以，我觉得你父页面应该有初始化查询事件，父带条件查询所以数据，然后父传子数据渲染子页面。（我们项目都这样搞，见代码）

其次，如果无法改变业务。每个子模块都有调接口，我就觉得你用重载组件this.$nextTick。父页面定时到点，然后调用this.$nextTick事件，把你所有组件刷一次。

<父模块>
   <子模块一 :subData1=data1> </子模块一>
   <子模块二 :subData2=data2> </子模块二>
   <子模块三 :subData3=data3> </子模块三>
</父模块>
数据：
 data(){
   return{
    data1:[], //模块一数据
    data2:[], //模块二数据
    data3:[], //模块三数据
   }
 }
 方法：
 getData(){
   ...do something  //你get或者post请求数据
 }
 timing(){          //定时方法
   .....
   this.getData()
 }
 .....................分割线...................
 子模块：
 <子模块一>
    .... 
 </子模块一>
 监听数据：
 props: {
    data1: Array,
 },
 watch(){  //监听异步数据父传子
    data1(){
      this.data = this.data1  //赋值给子页面初始化数据this.data
    }
 }

以上是 vue中定时刷新页面，更新数据（多个接口请求） 的全部内容， 来源链接： utcz.com/p/935392.html

回到顶部