Vue의 EventBus와 상태관리(Vuex,Pinia)

2024. 1. 5. 14:53뷰(Vue)

반응형

 

Vue를 제대로 사용하기전에 Vue에서사용하는 개념인 EventBus와 상태관리 개념인 Vuex(또는 pinia)의 차이점에 대해서 알아 보고자 한다.

두 방식의 공통점은 별도의 위치에서 상태를 관리하므로 비 부모-자식 간 컴포넌트 통신이 가능하다.

대부분의 사람들은 다음과 같이 설명한다. 애플리케이션의 크기가 크면 Vuex를 사용하고 규모가 작으면 Event Bus를 사용하는 것이 좋다.

아래 사이트에서는 무조건 Vuex를 사용하자. 라고 설명한다.

 

이유는 현재 Vue-CLI를 통한 설치나 각종 설치시 Vuex를 사용하기 위해선 따로 설정들이 필요했으나. 현재는 많은부분이 지원되어 편리하게 사용이 가능하다고 한다.

Vue사이트에서 제공하는 스타일 가이드에서도 실질적으로는 Vuex나 기타 상태관리 툴을 사용하는걸 권장하는듯 하다.

Vue Style Guide를 보게되면 이곳에도 Event Bus에 대한 언급이 있다.

Non-flux state management를 보게 되면 비 플럭스 상태 관리의 우선순위 규칙은 D로 주의해서 사용해야한다는 내용이다.

 

Style Guide — Vue.js

Vue.js - The Progressive JavaScript Framework

v2.vuejs.org

Global Event Bus가 대부분의 애플리케이션에 적합하지 않다고 경고하고 있으며, 상태 관리는 Vuex를 사용하기를 유도하고 있다. 또한 그 값이 변경되는 걸 추적하거나 확인하고자 할 때 Devtool에서 쉽게 확인이 가능하도록 지원해주기 때문에 더 더욱 상태관리 툴을 사용해야 한다고 한다.

참고주소

[Vue.JS] Vuex VS Event Bus

 

[Vue.JS] Vuex VS Event Bus

vue에서 컴포넌트 간 통신은 props와 emit을 통해서 주고받는다. 이는 부모-자식 관계가 아닌 전혀 다른 컴포넌트에게 파라미터 또는 값을 전달할 수가 없다는 문제점이 있다. 이런 문제점을 해결하

kdydesign.github.io

 

반응형

'뷰(Vue)' 카테고리의 다른 글

Vue에서 Pinia Store를 사용해보자.  (1) 2024.01.05
Vue 상태관리 (Vuex vs Pinia)  (0) 2024.01.05
Vue 실행 설정 분리(local, dev, real)  (0) 2024.01.05
Vue Sespnese에 관하여...  (1) 2024.01.05
Vue Transition 적용하기  (0) 2024.01.05