특정 컴포넌트에서 발생한 이벤트를 특정 컴포넌트에서 받는 처리를 간혹 하곤 할텐데,

컴포넌트가 부모 자식관계라면 자식에 emit 을 달아서 처리하면 간편하게 처리 할 수 있습니다.

완전히 떨어져 있는 컴포넌트의 경우는 조금 곤란해 졌습니다.

composables를 어떻게 잘 쓰면 될 것도 같은데, event bus 를 사용해보기로 했습니다.

mitt 설치

npm i mitt

plugins 설정

/plugins/event-bus.ts

import mitt from "mitt";

export default defineNuxtPlugin(() => {
  const emitter = mitt();

  return {
    provide: {
      event: emitter.emit, // Will emit an event
      listen: emitter.on, // Will register a listener for an event
      remove: emitter.off, // Will remove a listener for an event
    },
  };
});

event 발생하는 곳

const { $event } = useNuxtApp();

$event("someEvent");

listen 하는 곳

const { $listen } = useNuxtApp();

$listen("someEvent", async () => {
  init();
});

listen 해제

해제를 하지 않으면 이벤트 수신을 엄청 많이 하게 되므로 반드시 해제를 해줘야 한다.

$remove("someEvent");

이렇게 하면 간단히 event 를 받을 수 있었습니다.