在Vue中使用Vuex以及事件总线

Question

我这个问题已经在我的心理Rolodex中埋了很长时间了。我正在运行一个非常复杂的Vue应用程序，该应用程序处理许多必须通信的组件，因此我使用其Vuex系统对module进行了非常结构化的设置。但是，对于一组特定的组件，请说一个comments文件夹，即：

评论目录：

• Comments.vue //总体注释组件
• Comment.vue //每个评论的组件
• NewComment.vue //创建新评论的组件
• bus.js //仅保留这三个组件的事件总线

仅使用保留在此目录中的预留Event Bus来使这三个组件相互通信是不是很好，或者因为我已经拥有大型vuex系统，这被认为是“不当行为”吗？ >

Answer 1

我建议对所有应用程序使用Vuex。这样做会使您的状态保持在单个位置。使用事件总线有损于此，因为现在您有两个包含状态的地方。更糟糕的是，事件总线的维护性较差，并且经常破坏Vue和Vuex（以及其他Flux实现）促进的“单向数据流”。

Vuex可用于应用程序状态和应用程序数据。数据是诸如客户详细信息之类的常用内容。状态是“此侧边栏汉堡菜单已打开”或“此模式已打开”或“用户在列表中选择了此项目”。

这将导致您“我只是觉得Vuex应该用于应用程序范围的通信，而不是用于2-3个相邻组件之间的通信”。当您考虑它时，这是同一件事。

如果父组件希望与子组件进行通信，则它会传递道具。如果孩子希望以解耦的方式进行交流，则会发出事件。对于这种情况，这是完全好的。

尝试使用多个嵌套组件进行操作！ A -> B -> C -> D

想象一下D是否需要更新B中的某些状态。如何做到这一点，一直发射事件并耦合组件？ uck，那不是要走的路。 D应该调度一个Vuex操作，该操作又通过商店绑定更新B。何时A需要更新C中的内容呢？现在，您的B组件需要特殊情况的额外道具，以允许A在与C进行通信时B能够在没有A作为父母的情况下独立存在。再！派遣行动。

在页面的完全不同部分中的同级组件甚至组件之间进行通信完全是 Vuex设计的目的之一：应用程序状态。

删除事件总线并接受这种方法将使您的代码更容易维护。

Answer 2

如果您的应用程序非常复杂并且比使用vuex更好（对于状态管理来说更好），如果不是，则可以坚持使用props，event bus和所有其他功能。