Vue에서 이벤트 버스 및 Vuex 사용

Vue에서 이벤트 버스 및 Vuex 사용

나는 이 질문을 꽤 오랫동안 내 정신의 롤로덱스에 묻어두었다.매우 복잡한 Vue 애플리케이션을 실행 중인데, 이 애플리케이션은 통신해야 하는 구성 요소를 상당히 많이 다루어서Vuex그것을 이용하여.module계통그러나 특정 구성 요소 그룹에 대해서는 다음과 같이 말한다.comments폴더, 예:

주석 디렉토리:

• 평.vue // 전체 주석 구성 요소
• 각 의견에 대한 Comment.vue // 구성 요소
• 새 주석을 작성하기 위한 NewComment.vue // 구성 요소
• 버스.js // 이 세 가지 구성 요소만을 위한 이벤트 버스 예약

예약한 것을 활용해도 괜찮은가?Event Bus이 세 가지 구성 요소가 서로 통신할 수 있도록 이 디렉토리에만 배치되거나, 이미 대형 Vuex 시스템을 사용하고 있기 때문에 "실행"으로 간주되는가?

나는 너의 모든 어플리케이션에 Vuex를 사용하는 것을 추천한다.그렇게 하는 것은 당신의 상태를 한 곳에 유지시킨다.이벤트 버스를 이용하는 것은 이것으로부터 멀어지고, 그 안에서 당신은 현재 상태를 포함하는 두 개의 장소가 있다.더 나쁜 것은, 이벤트 버스는 유지보수가 용이하지 않고 종종 Vue와 Vuex(및 기타 Flux 구현)에 의해 촉진되는 "단방향 데이터 흐름"을 깨뜨린다는 것이다.

Vuex는 애플리케이션 상태와 애플리케이션 데이터 모두에 사용할 수 있다.데이터가 고객의 세부 정보 등과 같은 일반적인 사항임"이 사이드바 햄버거 메뉴가 열려 있다" 또는 "이 모달은 열려 있다" 또는 "사용자가 목록에서 이 항목을 선택했다"라고 명시하십시오.

그러면 "나는 단지 Vuex가 2-3개의 인접 구성요소 사이의 통신이 아닌 앱 와이드 통신에 사용되어야 한다고 느낀다"는 내용으로 이어진다.생각해도 마찬가지야.

부모 구성 요소가 자식 구성 요소와 통신하기를 원하는 경우, 소품을 아래로 전달한다.만약 아이가 분리된 방식으로 의사소통을 하고 싶다면, 그것은 이벤트를 발생시킨다.그것은 그 시나리오에 완벽하게 적합하다.

중첩된 여러 구성 요소를 사용하여 수행해 보십시오! A -> B -> C -> D

D가 B의 어떤 상태를 업데이트할 필요가 있다고 상상해 보라.어떻게 그렇게 하고, 사건들을 계속 내보내고, 구성 요소들을 결합할 수 있는가?헉, 그건 갈 길이 아니야.D는 Vuex 작업을 전송해야 하며, 이 작업은 스토어 바인딩을 통해 B를 업데이트한다.A가 C에서 무언가를 업데이트해야 할 때는?이제 당신의 B 부품은 단지 A가 부모로서 없이 스스로 존재할 수 있어야 할 때 A가 C와 의사소통할 수 있도록 하기 위해 특별한 케이스 추가 소품이 필요하다.또 헉!출동하다.

이 페이지의 전혀 다른 부분에 있는 형제 구성 요소 또는 구성 요소 간에 통신하는 것은 Vuex가 설계한 애플리케이션 상태 중 하나이다.

이벤트 버스를 제거하고 이 접근 방식을 수용하면 코드가 더 쉽고 유지 관리 가능해질 것이다.

만약 당신의 애플리케이션이 주 관리에 더 좋은 vuex보다 매우 복잡하고 크다면, 만약 당신이 소품, 이벤트 버스 그리고 이 모든 것을 고수할 수 없다면.

참조URL: https://stackoverflow.com/questions/51204083/using-vuex-as-well-as-an-event-bus-in-vue