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

Posted 2023-02-22

【中文标题】在 Vue 中使用 Vuex 以及事件总线

【英文标题】：Using Vuex as well as an Event Bus in Vue

【发布时间】：2018-12-14 16:33:51

【问题描述】：

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

评论目录：

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

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

【问题讨论】：

vuejs.org/v2/style-guide/… 。但是，如果您知道自己在做什么，那完全取决于您

我只是觉得 Vuex 应该用于应用程序范围的通信，而不是用于 2-3 个相邻组件之间的通信......但是我对这个实现非常满意，感谢链接！ @JacobGoh

@MikeStrong 即使您在应用程序中使用 Vuex，也可以使用事件总线。但是，你知道，由于 vuex 是为所有可用组件之间的通信而设计的，所以我看不到事件总线的使用是相关的。但这取决于你，顺便说一句！

我的意思是，Vuex 是全球性的。假设我有 20 个 cmets 组件->每个有 10 个评论组件...为什么/如何使用 vuex 来允许每个唯一的子级->父级相互通信？每个父->子对的所有突变都会相互重叠，因为状态由所有组件共享...@Sanjay

为什么你觉得首先需要使用事件总线，而不是普通的 Vue 事件，尤其是如果这些组件具有直接的父子关系，正如你刚才解释的那样？只需使用正常事件。

【参考方案1】：

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

【参考方案2】：

我建议在您的所有应用程序中使用 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 的设计目的之一：应用程序状态。

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

【讨论】：

是的，我明白，在这个小小的询问之前，我的整个应用程序都是 vuex 管理的。这是场景。我们登陆用户资料，获取用户帖子并存储在 vuex->update ui 中，没问题。但是每个帖子和回复呢？将它们全部存储在一个状态对象中似乎有点古怪

这并不奇怪，它应该如何工作。一系列帖子和子帖子。这就是状态管理的重点。

@user9993 这是非常简洁的解释。我只想知道，这只是清除了我脑海中与状态管理有关的每一点。谢谢

@Bsienn 不客气，很高兴它有帮助！不要忘记检查 Vue 不和谐。

如何只使用 vuex 来发出事件？不改变状态数据？以及我如何对任何不可更改的数据做出反应，我只想使用 vuex 对某些事件做出反应