在实时通讯应用程序与国家打交道

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。您可以捕获发送消息的事件，甚至可以捕获事件。