[vue.js] mitt 라이브러리 사용

mitt 라이브러리는 먼 곳에 떨어진 컴포넌트에 데이터 전송할 때 쓰인다.
ex) 손자 컴포넌트 -> 아들 컴포넌트 -> 최상위 컴포넌트
손자 컴포넌트에서 최상위 컴포넌트에게 데이터를 전송하고 싶을 때 mitt 라이브러리를 쓰면 쉽게 전송이 가능하다.

mitt 라이브러리 설치

npm install mitt

main.js 파일 수정

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
let emitter = mitt();
let app = createApp(app)
app.config.globalProperties.emitter = emitter;

app.mount('#app')

app.config.globalProperties.emitter = emitter; : 글로벌한 변수 보관함, 모든 컴포넌트들이 사용할 수 있는 변수가 있을 떄 사용. 모든 컴포넌트가 emitter 를 쓸 때마다 방금 설치한 mitt 라이브러리 동작하는 것.

*만약 axios를 많이 사용한다?
app.config.globalProperties.axios = axios;
axios 라이브러리를 app 에 추가해주면 된다.

app은 vue 설정 부분을 다루는 변수.

mitt 데이터 전송하는 법

1. 데이터 전송하는 함수 만듬
   this.emitter.emit('작명','데이터')

2. 수신
   tnis.emitter.on('작명', 화살표함수 (수신받은 데이터) => {})

수신하는 코드는 mounter() 안에 작성하는게 관습이다.

mitt 의 단점
1) 작명을 unique하게 잘 써야함.
2) 많이 쓰게 되면 관리가 힘들어진다.

-> 그래서 vuex를 사용하는걸 추천한다.