Vue eventBus $on与$off

最近公司项目碰到一个问题，就是$on $off的用法问题

是这么封装的（因为是用的qiankun，eventbus挂载到window上了）。

export async function getPatients(fn) {
  window.eventBus.$on(events.GET_PATIENT_INFO, (...res) => {
    fn(...res)
  })
}

export function offPatients(fn) {
  console.log('暂时取消移除方法')
  window.eventBus.$off(events.GET_PATIENT_INFO, fn)
  window.eventBus.$off(events.GET_PATIENTLIST_INFO, fn)
  window.eventBus.$off(events.TASK_CENTER_INFO, fn)
}

之前也比较少用eventBus去做事件的监听，然后无脑的抄了波作业。呃呃，这么抄用的

import { getPatients as PatientWatcher, offPatients } from '@/event-emitter/on'

created() {
    PatientWatcher(() => {
        this.init()
      })
},

beforeDestroy() {
      offPatients(this.init)
    }

嗯。没毛病....本地好像可以用，还测了一把 window.eventBus.$emit('SET_CURRENT_PATIENT_INFO', {encounterId: '10000009', bizRoleId: '0'})

然后测试线上测出各种莫名奇妙的问题。数据加载不出来。重复的相同请求会拦截掉

贴上官网说明

vm.$off( [event, callback] )

• 参数：

  • {string | Array<string>} event (只在 2.2.2+ 支持数组)
  • {Function} [callback]

• 用法：

  移除自定义事件监听器。

  • 如果没有提供参数，则移除所有的事件监听器；

  • 如果只提供了事件，则移除该事件所有的监听器；

  • 如果同时提供了事件与回调，则只移除这个回调的监听器

因为是微服务架构，移除事件监听使用第三种方式

上述使用，封装有问题，调用也有问题。$on(event, callback)与$off(event, callback)中的callback，必须为同一个函数对象，否则不会移除监听事件，重复进入组件或者该路由，会导致重复监听。轻则性能问题，重则整个页面出现问题。

修改后：

// 修改
export async function getPatients(fn) {
  window.eventBus.$on(events.GET_PATIENT_INFO, fn)
}

export function offPatients(fn) {
  console.log('暂时取消移除方法')
  window.eventBus.$off(events.GET_PATIENT_INFO, fn)
  window.eventBus.$off(events.GET_PATIENTLIST_INFO, fn)
  window.eventBus.$off(events.TASK_CENTER_INFO, fn)
}

// 调用

import { getPatients as PatientWatcher, offPatients } from '@/event-emitter/on'

created() {
    PatientWatcher(this.init)
},

beforeDestroy() {
      offPatients(this.init)
    }

呃呃，干掉封装及调用的箭头函数