vue添加全局轮询方法

vue添加全局轮询方法

main.js 新写一个方法

// main.js 使用this.$route.path 会报错，
// 使用 location代替
Vue.prototype.autoChange = function(keyWords, fn) {
  // 确定是当前的组件 (当前的前端路由路径和传入的key相匹配)
    if(location.pathname.includes(keyWords)) {
       setTimeout(() => {
          fn()
       }, 5000) // 全局统一管理所有页面的轮询间隔(有很多个页面有自动刷新)
    }
}
  

// 组件使用
created() {
  this.init();
}
// 初始化生命周期调用的方法

methods: {
  // 初始请求列表数据的方法
  init() {
     ....
     ...
     this.autoChangeMethods(); // 初始方法中即触发轮询
  },

   /**
   * 为什么多写了一个函数？
   & 
   * 在执行的箭头函数中，将调用接口的方法 (getAppList) 执行完后，
   & 
   * 重新调组件的函数 (autoChangeMethods),
   &
   * 可以确保每次传递的值的准确性、及时性，
   &
   * 而不是传死值，只能使用一次
   */
    
   autoChangeMethods() {
     this.autoChange(// 挂载在vue原型上的函数，组件(实例可以直接使用)，这里this执行Vue.prototype
                'union',
                () => {// 第二个参数为一个函数，原型上的函数将它执行了就好
                    this.getAppList(  // table列表方法
             this.uuid,    // 唯一标识
                         this.currentPage, // 当前页
             this.pageSize     // 每页数量
            );
          this.autoChangeMethods(); // 递归轮询
        }
      )
  }
}

// 待优化