EventBus를 대체하는 mitt 라이브러리란?

Vue2까진 EventBus를 쓸 수 있었는데

 

Vue3 이후로는 mitt을 쓴다.

 

EventBus와 mitt이란 서로 연관없는 컴포넌트나 꽤 떨어진 계층의 조상, 자식 컴포넌트끼리

 

데이터를 주고받을 때 사용하는 라이브러리이다.

 

가까운 계층이라면 props나 $emit을 사용하면 되겠지만, 멀리 떨어져있다면 저 라이브러리를 쓰는게 효율적이다.

 

 

cmd에서 npm install mitt으로 설치 후 main.js에 등록을 해줘야한다.

 

main.js에는 우리가 자주 쓰는 라이브러리를 등록해줄 수 있는데,

 

저렇게 mitt를 import해줘야한다.(외부에서 설치한 라이브러리는 from에 ./ 이런 경로 설정이 필요없다.)

 

그리고 emitter라는 let 변수에 mitt()이라는 함수를 할당하는데,

 

이 mitt()함수가 우리가 사용할 기능이다.

 

선언된 app은 Vue 프로젝트를 관장하는 중요한 변수이고

 

config.globalProperties는 프로젝트 전체에서 사용가능한 전역 변수 저장소이자 객체인데,

 

저기에 .emitter = emitter로 mitt()함수를 emitter라는 이름으로 전역 사용할 수 있게 달아줬다.

 

우리가 자주쓰는 axios같은것도 저런 방식으로 

 

app.config.globalProperties.axios = axios;

 

이렇게 달아놓으면, 아무 컴포넌트에서나 this.axios.get(url) 이렇게 사용하능하다.

 

해당 컴포넌트에서 import axios from 'axios'; 를 해주지않아도 말이다!

 

 

그래서 송출하고싶은 데이터를

useFilter(event) {

            const filterName = event.target.innerText;

            this.emitter.emit('useFilter', filterName);

        }

이런식으로 메소드에다 작성한다.

 

emit 함수의 첫 인자는 이벤트명을 작명해서 넣으면되고, 두 번째 인자는 전송할 변수이다.

 

받는 컴포넌트는 mounted() 에다가

mounted() {

        this.emitter.on('useFilter', (filter) => {

            this.filterName = filter;

        });

    }

 

on 함수에 전송된 이벤트명, 전송된 데이터를 인자로받아 실행할 로직을 콜백 함수로 넣어주면 된다.