一个带有ve3和typescript的EventBus

Question

有很多关于vue 3事件总线模式的帖子和例子，但是在打字时我遇到了一个问题。我的类找不到导出的事件总线。

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/tailwind.css'
import mitt from "mitt";
const emitter = mitt()
const app = createApp(App)
app.config.globalProperties.emitter = emitter
app.use(router).mount('#app')

home.vue

@Options({
components: {
HelloWorld,
},
})
export default class Home extends Vue {
name = ""
age = 25

counter(): void {
this.age = this.age + 1
}
emitMethod () {
this.emitter("test", 22); <-- emitter not found
this.emitter.emit("test", 22) <--- nope
emitter.emit("test", 22) <--- nope
}
}
</script>

错误TS2339:属性'emitter'在类型'HelloWorld'上不存在。

由于没有找到发射器，我想我会尝试使用useEmitter.js再次导出它

import { getCurrentInstance } from 'vue'
export default function useEmitter() {
const internalInstance = getCurrentInstance();
const emitter = internalInstance.appContext.config.globalProperties.emitter;
return emitter;
}

没有工作，所以我试着

import mitt from "mitt";
export default mitt()

也不工作

tsconfig

{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}

如有任何建议，不胜感激。

Answer 1

下面是我如何在Vue 3中使用Mitt。当它需要的时候，我把它像服务一样注入。

// main.js
import { createApp } from 'vue';
import App from './App.vue'
import mitt from 'mitt';
const app = createApp(App)
const eventBus = mitt();
app.provide('eventBus', eventBus);
app.mount('#app');

// component consuming event
export default {
inject: [ 'eventBus' ],
data() {
return {
}
},
mounted() {
this.eventBus.on('something', a => { this.doA(a); });
},
methods: {
doA(a) {
// do something
}
},
}

// component emitting event
export default {
inject: [ 'eventBus' ],
data() {
return {
}
},
methods: {
emitSomething() {
let a = 1;
this.eventBus.emit('something', a);
}
}
}