실시간 메시징 앱에서 상태 처리

실시간 메시징 앱에서 상태 처리

나는 VueJS 2와 함께 구축된 실시간 메시징/챗 앱에서 상태 관리에 관한 지침을 찾고 있다.

앱은 다음 다이어그램에 설명된 몇 가지 구성 요소로 구성된다.

지금까지 디스플레이(가짜) 대화를 실행했다.앱 구성 요소에는 대화 개체가 있는 배열이 포함되어 있다.각 아동 구성요소에 대해, 관련 데이터는 소품을 사용하여 전달된다.이것은 정말 간단하고 매력적으로 작용한다.

이제, 나는 나무에 깊게 내포된 구성 요소로부터의 행동/진작을 다루어야 한다.예를 들어 메시지를 보내고 해당 메시지 배열에 메시지를 추가하는 경우.

AppConversationChatWindowInput 구성 요소에서 (글로벌) 이벤트를 발송하고 App 구성 요소에서 처리하는 것만큼 쉽다고 생각했다.내가 틀렸어.분명히, 이 기능은 Vue 2.0이 Vuex에 유리하게 도입되었을 때 제거되었다.나는 왜 그것이 제거되었는지 잘 모르겠다. 어떤 상황에서는 이것이 완벽하게 합리적인 사건 처리 방법이 될 수 있기 때문이다.

몇 가지 가능한 해결책이 있을 것 같다.

1. 각 하위 구성 요소에 웹 소켓 연결 전달이건 기술적으로 효과가 있을 수 있어앱은 웹소켓 서버에 접속하여 소품을 사용하여 하위 구성요소에 접속한다.사용자가 메시지를 보낼 때 웹소켓 서버에 의해 메아리친다.앱 구성 요소는 메시지를 수신하여 메시지 배열에 추가할 수 있다.

   기술적 타당성과 상관없이, 이것은 나에게 형편없고 유지하기가 어려운 보관소처럼 느껴진다.내 생각에는 앱 이외의 어떤 구성 요소도 그것의 구체적인 구현은 말할 것도 없고 웹셋 연결을 알아서는 안 된다.

2. 체인의 각 구성 요소에서 수동으로 이벤트를 버블링하십시오.이것은 유지하기에 완전한 고통으로 보인다.불필요한 복잡성과 실패 지점을 많이 도입한다.

3. 글로벌 이벤트 버스 사용.이것은 가능하지만, 입력 필드가 글로벌 이벤트 버스에 의존해야 하는 이유는 무엇인가?나는 불필요한 의존과 결합을 좋아하지 않는다.그것은 복잡성을 가중시키고 사물을 시험하기 어렵게 만든다.

4. 글로벌 데이터 저장소 사용(Vuex).3번을 참조하라.또 다른 의존성과 복잡성 증가.또한 Vuex에 만족한다면 구성 요소의 데이터를 어떻게 검색하시겠습니까?(지금처럼) 구성요소를 사용하여 전달하거나, 트리 깊은 곳에 있는 구성요소가 매장에서 직접 가져갈 수 있는가?내게는, 구성 요소가 이런 식으로 해야 할 것 보다 훨씬 더 많이 알고 있는 것 같은 느낌이 든다.

생각나는 거 있어?내가 처한 상황에서 국가를 다루는 가장 좋은 방법은 무엇일까?

'글로벌 이벤트 파견하고 싶었다'와 '글로벌 이벤트 버스 이용하기 싫다'는 다소 단절이 있다.글로벌 이벤트 버스는 당신이 글로벌 이벤트를 파견/방송하는 방법이다.당신이 주목하듯이, 그것은 어떤 상황에서는 좋은 해결책이다.필요할 때 설치하는 것이 어렵지 않으니, 그것이 핵심 부에 있을 만한 강력한 이유가 없다.

버스를 Vue에 인스턴스(instance) 속성으로 생성하여 모든 구성 요소가 사용할 수 있도록 하십시오.

Vue.prototype.$globalEventBus = new Vue();

당신이 가지고 있었을 곳vm.$dispatch(...)할 수 있을 것이다vm.$globalEventBus.$emit(...)그리고 수신부품이 설정될 수 있다.vm.$globalEventBus.$on(...).

그 대신에, 당신은 상위 레벨에서 버스를 만들어 아이들을 통해 버스로 통과할 수 있다.이것은 세계화를 피하며, 거품이 생길 걱정은 하지 않아도 된다.

마지막으로, 내가 논평에서 언급했듯이, 토종 사건들은 거품이 일며, 너는 그것들을 체인의 위쪽 어떤 구성 요소에서도 잡을 수 있다.당신은 메시지를 보내는 이벤트를 잡을 수도 있고 심지어 잡기 위해 당신의 이벤트를 굴릴 수도 있다.

참조URL: https://stackoverflow.com/questions/46668006/dealing-with-state-in-a-realtime-messaging-app