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)
    }

呃呃，干掉封裝及調用的箭頭函數