我应该如何处理 Vuex 中的事件？

Question

我习惯使用全局事件总线来处理跨组件方法。例如：

 var bus = new Vue();
...
//Component A
bus.$emit('DoSomethingInComponentB');
...
//Component B
bus.$on('DoSomethingInComponentB', function(){ this.doSomething() })

但是，我正在构建一个更大的项目，这需要全局状态管理。当然，我想使用 Vuex。

虽然这种总线模式适用于 Vuex，但它似乎是错误的。我已经看到 Vuex 被推荐作为这种模式的 替代品。

有没有办法在 Vuex 的组件中运行方法？我应该如何处理这个？

原文由 Aaa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vuex 和 事件总线 是两个不同的东西，因为 Vuex 管理应用程序的中央状态，而事件总线用于在应用程序的不同组件之间进行通信。

您可以从组件执行 vuex 突变或操作，也可以从 vuex 的操作中引发事件。

正如 文档 所说：

动作类似于突变，不同之处在于：

• 动作不是改变状态，而是提交突变。
• 动作可以包含任意异步操作。

因此，您可以通过总线从动作中引发事件，并且可以从任何组件方法调用动作。

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用全局事件总线是一种反模式，因为跟踪它变得非常困难 （这个事件是从哪里触发的？我们还在哪里听它？等等）

为什么要使用全局事件总线？您想在另一个组件中触发某种方法吗？如果您使用 Vuex，那么您的所有操作（方法）都处于一个中央状态，您只需调度您的操作。

因此，例如，而不是这样做..

 // Component A
bus.$emit('DoSomethingInComponentB');

// Component B
bus.$on('DoSomethingInComponentB', function(){ this.doSomething() })

使用 Vuex，您将在中央存储中拥有 doSomething() 功能作为操作。然后只需确保将本地组件数据转换为全局 Vuex 状态数据并调度该操作。

 this.$store.dispatch('doSomething')

原文由 Martin Zeltin 发布，翻译遵循 CC BY-SA 4.0 许可协议