useEventBus payload

const modalBus = useEventBus<'show' | 'hide'>('modal')

modaBus.emit('show', {name: 'login-modal')

[Idered]

mitt package api is really good. Being able to define payload type for each event type is easy

type Events = {
  foo: string;
  bar?: number;
};

const emitter = mitt<Events>(); // inferred as Emitter<Events>

emitter.on('foo', (e) => {}); // 'e' has inferred type 'string'
emitter.on('bar', (e) => {}); // 'e' has inferred type number | undefined

emitter.emit('foo', 42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'. (2345)

[webfansplz]

We usually use the Mitt with Provide/Inject API . (mitt function only triggered once time)

You can use mitt directly like this :

import { inject, App, InjectionKey } from 'vue'
import mitt, { Emitter } from 'mitt'

const MittKey: InjectionKey<Emitter> = Symbol()

export function initMitt(app: App<Element>) {
    const emitter = mitt()
    app.provide(MittKey, emitter)
}

export function useEmitter() {
    return inject(MittKey)
}

But we usually use composable API in in anywhere and call it multi times , I guess that’s what useEventBus was designed for.

https://github.com/vueuse/vueuse/blob/aef8a2b2459b064ea4d92c843db2f88ef3c0eb2c/packages/core/useEventBus/internal.ts#L4

// a.vue
 const { on, emit } = useEventBus<'inc'|'dec', number>('counter')
 const { on, emit } = useEventBus<'show'|'hide', {name:string}>('modal')
// b.vue
 const { on, emit } = useEventBus<'inc'|'dec', number>('counter')
 const { on, emit } = useEventBus<'show'|'hide', {name:string}>('modal')