vue3에서 발행-구독패턴 사용하기

게임 클라이언트 개발에서 자주 사용하는 옵저버패턴을 구현하고 싶어서 찾다보니 좋은 플러긴이 있어서 소개한다.
( 원래는 옵저버 패턴을 다루려 했는데 자세히 찾아보니 구독패턴 구조이다 )

본문은 <script setup> 을 사용한 방식이다.

mitt 설치

npm i --save mitt

main.js 설정 변경

const emitter = mitt();
.
.
.
app.config.globalProperties.$emitter = emitter;

발행

<script setup>
.
.
.
const { proxy } = getCurrentInstance();
.
.
.
proxy.$emitter.emit( "test", '메시지 전달' );

구독

<script setup>
.
.
.
const { proxy } = getCurrentInstance();
.
.
.
proxy.$emitter.on( "test", ( obj ) => { console.log( obj ); } );

$emitter 에서 emit 으로 메시지를 전달하면 구독된 소스코드에서 메시지를 받을 수 있게 된다.