Vue.js 3 에서 모듈간의 데이터 통신

Vue.js 에서 모듈간의 데이터 통신 방법은 세가지가 있다.

이벤트 버스 사용하기

이벤트 버스는 어플리케이션 전역에서 이벤트를 발생하고 수신할 수 있도록 하는 기능으로 이벤트 버스를 이용하여 모듈간의 데이터 통신을 할 수 있다.

// 이벤트 버스 객체 생성
const eventBus = new Vue()

// 모듈 A에서 이벤트를 발행하는 코드
eventBus.$emit('event-name', data)

// 모듈 B에서 이벤트를 수신하는 코드
eventBus.$on('event-name', (data) => {
  // data를 이용해 로직을 수행합니다.
})

Vuex 상태 관리 패턴 사용하기

Vuex는 Vue.js에서 어플리케이션의 상태관리를 위한 패턴으로 이것을 사용하면 모듈간의 데이터를 효율적으로 업데이트하고 관리할 수 있다.

Vue3에서는 Pinia를 사용하면 된다.

예제는 Vuex로…

// Vuex 스토어 생성
const store = new Vuex.Store({
  state: {
    data: {}
  },
  mutations: {
    updateData(state, payload) {
      state.data = payload
    }
  },
  actions: {
    setData({ commit }, payload) {
      commit('updateData', payload)
    }
  }
})

// 모듈 A에서 상태를 업데이트하는 코드
store.dispatch('setData', data)

// 모듈 B에서 상태를 읽어오는 코드
const data = store.state.data

Props와 Emit을 이용한 컴포넌트 간 통신

Vue.js에서 부모 자식간의 통신을 위한 방법으로 Pros를 사용한다. 자식에서 부모컴포넌트로 이벤트 발생시키는 방법으로 Emit을 사용한다.

<!-- 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 -->
<template>
  <div>
    <child-component :data="parentData" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentData: {}
    }
  }
}
</script>

<!-- 자식 컴포넌트에서 부모 컴포넌트로 이벤트 발생 -->
<template>
  <div>
    <button @click="emitEvent">이벤트 발생</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitEvent() {
      this.$emit('event-name', data)
    }
  }
}
</script>

이러한 방법들을 사용하면 Vue.js 에서 모듈간에 데이터를 효율적으로 공유하고 통신할 수 있다.