vue 全局定时更新 轮询

发布时间:2023年12月21日

首先需要在最外层的父组件定义一个刷新的时间 初始值为nulll, 在定义一个新时间用于监听状态的变化。

data () {
    return {
      dataTime: 0,
      inverterMonTimer: null, // 设置刷新时间 2 分钟一次
    }
  },

然后再钩子函数中执行定义封装的方法

mounted(){
 this.getInverterMonTimer()
},
记得清空定时器
 beforeDestroy(){
    if (this.inverterMonTimer) {
      clearInterval(this.inverterMonTimer);
      this.inverterMonTimer = null;
    }
  },

methods:{
    getInverterMonTimer () {
      // 判断定时刷新是否存在,存在先清除
      if (this.inverterMonTimer) {
        clearInterval(this.inverterMonTimer);
        this.inverterMonTimer = null;
      }
      // 实现轮询 两分钟执行一下
      this.inverterMonTimer = window.setInterval(() => {
        this.dataTime = new Date().getTime();
      }, 120000);
    },
   }

然后再 template 中找到我们的父组件 component 把时间穿进去,在子页面接收并监听这个时间,去触发接口更新后,每间隔时间查询更新接口。

  <component
    :is="item.is"
    ref="component"
    :echartsId="item.id"
    :style="{background: item.color, overflow: 'hidden'}"
    :dataw="item.w"
    :datah="item.h"
    :dataInfo.sync="item.dataInfo"
    :dataTypeList.sync="item.dataTypeList"
    :dataTime="dataTime" // 这个是传的的时间
  ></component>

在需要的子组件中接收props:{}

 props:{
    dataTime:{
      type: Number,
      default:() => {
        return 0
      }
    }
  },
watch: {
    dataTime: {
      immediate: true,
      handler (val) {
        this.getCoalTrackData() //
      }
    }
  },
mounted () { this.getCoalTrackData() // 页面加载后接口调取}
文章来源:https://blog.csdn.net/lzfengquan/article/details/135128435
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。