CODEWITHSUNDEEP
eventsvuejs3nuxt3.jseventemitterbus
Norm Strassner
Norm Strassner

Reputation: 356

Sending object data to event bus with Mitt

In a Nuxt3/Vue3 project, I have setup Mitt to provide global events on a button click and it works fine, but I don't know how to send an object instead of an object member.

The current system I have successfully sends an event with an object member, as described, below.

I have a composable for the emitter:

import mitt from 'mitt'
type ApplicationEvents = {
  'ActionButton:button': stringimport mitt from 'mitt'
type ApplicationEvents = {
  'ActionButton:button': string
};
const emitter = mitt<ApplicationEvents>()
export const useEvent = emitter.emit
export const useListen = emitter.on
};
const emitter = mitt<ApplicationEvents>()

export const useEvent = emitter.emit
export const useListen = emitter.on

And, I have a class to use:

// Data sent to a bus event
export interface ActionButton {
    button: string,
}

Then, I can send information to any component

const actionButtonClicked = (btn: string) => {
  console.log("Sending user event for", btn);
   useEvent('ActionButton:button', btn);

}

And it is successfully recieved:

useListen('ActionButton:button', (btn) => {
  console.log("Received: ", btn);
});

What I can't seem to do is to send an object instead of an object member. I would like to send this entire object with the event:

export interface ActionButton {
    button: string,
    tab: number
}

I have been unable to figure out how to send that entire object, or at least send multiple object members through the event bus.

Upvotes: 0

Views: 42

Answers (0)

Related Questions