在實時通訊應用程序與國家打交道

Question

我在找一些指導，關於在實時通訊管理狀態/聊天應用程序內置有VueJS 2.

該應用程序由幾個部分組成，其概述如下圖：

到目前爲止，我已經實現了顯示（假的）對話。 App組件包含一個包含對話對象的數組。對於每個子組件，使用道具傳遞相關數據。這很簡單，就像一個魅力。

現在，我必須處理深層嵌套在樹中的組件的動作/突變。例如，發送消息並將其附加到相應的消息陣列。

我認爲這與在AppConversationChatWindowInput組件中分派（全局）事件並在App組件中處理它一樣簡單。男孩是我錯了。顯然，this functionality was removed when Vue 2.0 was introduced贊成Vuex。我不確定它爲什麼被刪除，因爲在某些情況下，這可能是處理事件的完全合理的方式。

我想有幾個可能的解決方案：

1. 薪火WebSocket連接到每個子組件。這在技術上可行。應用程序將連接到websocket服務器，並使用道具將此連接傳遞給其子組件。當用戶發送消息時，它會被websocket服務器迴應。 App組件可以偵聽消息並將其附加到消息數組中。

   無論技術的可行性如何，這感覺就像一個蹩腳，難以維護的archicture對我來說。在我看來，應用程序以外的其他組件都不應該意識到websocket連接，更不用說其具體實現了。

2. 在鏈中的每個組件中手動冒泡事件。 這似乎是一個完整的痛苦來維持。引入了很多不必要的複雜性和失敗點。

3. 使用全局事件總線。 這是可能的，但爲什麼輸入字段應該依賴於全局事件總線？我不喜歡不必要的依賴和耦合。它增加了複雜性，使測試更加困難。

4. 使用全局數據存儲（Vuex）。 請參閱＃3。另一個依賴並增加了複雜性。另外，if我會解決Vuex，我將如何檢索我的組件中的數據？我是否使用組件（如我現在所做的）將它傳遞給它？或者，樹中的某個組件是否會直接從商店中抓取它？對我來說，感覺這個組件比它應該知道的要多得多。

有什麼想法？在我的情況下處理狀態的最佳方式是什麼？

Answer 1

「我想發送一個全局事件」和「我不想使用全局事件總線」之間有點斷開。「全球性事件公共汽車是你如何派遣/廣播全球性事件，正如你所指出的，在某些情況下，這是一個很好的解決方案。當你需要它時不難設置，所以沒有強烈的理由在覈心的Vue

您可以創建總線爲instance property on Vue所以它是提供給每一個組件：

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

在這裏您將不得不vm.$dispatch(...)你會做vm.$globalEventBus.$emit(...)及接收部件可以設置vm.$globalEventBus.$on(...)。

或者，您可以在頂層創建一個總線並通過它通過把孩子當作道具。這避免了全局變量，你不必擔心冒泡。

最後，正如我在我的評論，本地事件泡指出，你可以catch them at any component higher up the chain。您可以捕獲發送消息的事件，甚至可以捕獲事件。