vue3 에서 vuex 사용법과 mitt 컴포넌트끼리의 통신 하는 방법

vue3  에서 vuex 를 이용하여 전역으로 데이터를 관리할수 있는 store 사용법과 컴포넌트 끼리 통신할수 있는 mitt 사용법을 알아보도록 합니다.

vue3의 문법은 <script> 가 아닌 <script setup> 를 이용하는 Composition API 사용법을 알아보도록 하겠습니다. 

사전작업

• store 사용하기 위해 vuex 설치 (npm install --save vuex)
• mitt 사용하기 위해 mitt 설치 (npm install --save mitt)

설치 완료하면 package.json 의 dependencies 에 mitt 와 vuex 가 추가되어 있습니다.

package.json

또한 vuex 의 store 사용하기 위한 기본 폴더(srote) 와 파일(index.js) 생성되었습니다.

main.js

import { createApp } from 'vue'
import './style.css'
import App from './AppChart.vue'
import store from './store'
import mitt from 'mitt'
const emitter = mitt();
 
 
/*
createApp(App)
    .use(store)
    .use(mitt)
    .mount('#app')
*/
 
const coforwardUi = createApp(App);
 
coforwardUi.provide('emitter', emitter)
coforwardUi.use(store);
coforwardUi.mount('#app');
 
/*
 
import { createApp, } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import jQuery from 'jquery'
 
import currencyFormat from './js/currencyFormat'
 
import { socketWorker,wsObj } from './js/socketWorker'
 
//Vue App의 구성
var coForwarVueUi=createApp(App);
coForwarVueUi.use(store);
coForwarVueUi.use(router);
coForwarVueUi.use(currencyFormat);
 
coForwarVueUi.mount('#app');
 
 
window.vueUi=coForwarVueUi;
 
global.$ = jQuery
 
 
 
 
//소켓워커 초기화 실행
window.coForwardSocket = socketWorker;
// window.coForwardSocket.init();
 
//==== 테스트 영역 ======//
// '636f466f7277617264'
 
// let utf8='636f466f727761726420ed959ceab880';
// let euckr='636f466f727761726420c7d1b1db'
 
// let header=socketWorker.headerInfo('length'); 
// console.log(header);
//==== 테스트 영역 끝 ======//
 
 
//쉐어드워커와 소켓포트를 전역으로 등록
coForwarVueUi.config.globalProperties.socketWorker=socketWorker;
coForwarVueUi.config.globalProperties.wsObj=wsObj;
 
*/

 

이제 vue3 를 이용하여 전역저장소인 store 랑 컴포넌트끼리 의 통신을 mitt 를 이용하여 할 수 있게 되었습니다.

참고 URL

https://kyounghwan01.github.io/blog/Vue/vue3/composition-api/#composition-api%E1%84%80%E1%85%A1-%E1%84%82%E1%85%A1%E1%84%8B%E1%85%A9%E1%84%80%E1%85%A6-%E1%84%83%E1%85%AC%E1%86%AB-%E1%84%87%E1%85%A2%E1%84%80%E1%85%A7%E1%86%BC

vue3 composition api 사용법, vue, computed, reactive, ref, watch, watchEffect, props, vuex, composable

https://stackblitz.com/edit/vue-script-setup-with-vuex?file=src%2Fcomponents%2FUserProfile.vue,src%2Fstore.ts 

Script setup with Vuex - StackBlitz

https://stackoverflow.com/questions/66537320/vue-3-event-bus-with-composition-api

Vue 3 Event Bus with Composition API

https://www.appsloveworld.com/vuejs/100/8/vue-3-event-bus-with-composition-api

[Solved]-Vue 3 Event Bus with Composition API-Vue.js