如何使vue文件侦听(mitt的emitter.on)外部js文件中的emitter.emit事件？

Question

我的问题是我有一个外部文件，希望发出一个Vue文件可以访问的事件。

external.js：

import mitt from 'mitt';
const emitter = mitt();

function transaction(){
  emitter.emit('TRANSACTION_CONFIRMED_NOTIFICATION', true)
}

vue文件：

const internalInstance = getCurrentInstance();
const emitter = internalInstance.appContext.config.globalProperties.emitter;
setup(){    
  emitter.on("TRANSACTION_CONFIRMED_NOTIFICATION", payload => {
     console.log('notify ' + payload);
  });
}

我能知道怎么做吗？

Answer 1

您的Vue文件和外部脚本需要使用相同的发射器实例来侦听它们之间的事件。

如果您控制外部脚本，则导出发射器实例，以便Vue文件可以导入它：

external.js：

export const emitter = mitt()

//...

Vue文件：

import { emitter } from './external'

export default {
  setup() {
    emitter.on(/*...*/)
  }
}