소행성왕자

Vue 3 애플리케이션에서 여러 컴포넌트에서 동일한 컴포넌트를 사용하면서 mitt를 활용한 이벤트 핸들러가 중복 실행되는 문제를 해결하는 방법을 소개합니다.이 글에서는 전역 이벤트 버스를 사용하여 이벤트 리스너가 한 번만 등록되도록 하는 방법을 설명합니다.문제상황여러 컴포넌트(order.vue, rfOrder.vue, marketWatch_spot.vue, marketWatch_exchange.vue)에서 동일한 컴포넌트(currencyMaster.vue)를 사용하고 있습니다.mitt를 사용하여 이벤트(FAReceive)를 관리하는데, 각 컴포넌트가 마운트될 때마다 동일한 이벤트 리스너가 중복 등록되어 이벤트 발생 시 핸들러가 여러 번 호출되는 문제가 발생했습니다.문제 해결 방법이 문제를 해결하기 위해 ..

원본 코드const loadChartDatahandler = data=>{ // to do};onUnmounted(()=>{ emitter.off('loadChartData', loadChartDatahandler) }):onMounted(()=>{ emitter.on('loadChartData', data=>{ loadChartDatahandler(data); })}); Vue 3에서 이벤트 리스너를 등록하고 해제하는 과정에서 loadChartData 배열의 길이가 계속 늘어난다면, 이는 이벤트 리스너가 제대로 제거되지 않았기 때문일 가능성이 큽니다. 이 문제를 해결하려면 이벤트 리스너를 등록할 때 사용하는 함수 참조를 일관되게 유지해야 합니다.문제는 onMoun..

문제 설명Vue3를 사용하는 프로젝트에서 웹에서는 emitter를 통해 이벤트가 정상적으로 전달되지만, 모바일 앱에서는 이벤트가 전달되지 않는 문제가 발생했습니다. 문제의 원인은 웹과 모바일의 초기 접근 파일이 다르기 때문입니다.문제 원인웹 초기 접근 파일: AppTr.vue모바일 초기 접근 파일: AppMobileTr.vue문제가 발생한 컴포넌트는 infoChartToTr.vue입니다. 이 컴포넌트가 웹에서는 AppTr.vue에 import 되어 있어 이벤트가 정상적으로 처리되지만, 모바일에서는 AppMobileTr.vue에 import 되어 있지 않아 이벤트가 처리되지 않았습니다.해결 방법모바일 초기 접근 파일인 AppMobileTr.vue에 infoChartToTr.vue 컴포넌트를 import 하..