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

Question

我已经把这个问题埋在我的心理 Rolodex 中已经有一段时间了。我正在运行一个非常复杂的 Vue 应用程序，它处理大量必须通信的组件，因此我使用了一个非常结构化Vuex的module系统设置。但是，对于特定的一组组件，比如说一个comments文件夹，即：

评论目录：

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

是否可以使用Event Bus放置在此目录中的保留内容仅用于这 3 个组件相互通信，或者这是否被视为“不当行为”，因为我已经有一个大型 vuex 系统正在运行？

Answer 1

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

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

这会导致您“我只是觉得 Vuex 应该用于应用程序范围的通信，而不是用于 2-3 个相邻组件之间的通信”。仔细想想也是一样的。

如果父组件希望与子组件通信，它会向下传递 props。如果孩子希望以解耦的方式进行交流，它会发出事件。对于这种情况，这完全没问题。

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

想象一下，如果 D 需要更新 B 中的某个状态。你如何做到这一点，一路发出事件，并耦合你的组件？哎呀，这不是要走的路。D 应该调度一个 Vuex 动作，该动作又通过 store 绑定更新 B。当 A 需要更新 C 中的某些内容时呢？现在，您的 B 组件需要特殊情况的额外道具，以允许 A 与 C 通信，而 B 应该能够在没有 A 作为父项的情况下独立存在。又呸！分派行动。

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

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

Answer 2

如果你的应用程序非常复杂且庞大，那么使用 vuex 更适合状态管理，如果不是，你可以坚持使用 props、事件总线和所有这些。