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

Question

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

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

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

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

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

Answer 1

Vuex and event bus 在 Vuex 管理应用程序的中央状态而事件总线用于在应用程序的不同组件之间进行通信的意义上，这是两种不同的东西。

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

正如 docs 所说：

Actions are similar to mutations, the difference being that:

Instead of mutating the state, actions commit mutations.

Actions can contain arbitrary asynchronous operations.

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

Answer 2

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

为什么要使用全局事件总线？有没有你想在另一个组件中触发的方法？如果你使用 Vuex，那么你所有的动作（方法）都处于一个中央状态，你可以直接调度你的动作。

所以例如不要这样做..

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

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

使用 Vuex，您可以在中央存储中拥有 doSomething() 功能作为一个动作。然后确保将本地组件数据转换为全局 Vuex 状态数据并分派该操作。

this.$store.dispatch('doSomething')

Answer 3

它可能不是你要找的直接，但我使用观察者来响应状态变化。我来自 Angular 的背景，在这种背景下，副作用对我来说很有意义。为了完成这项工作，我在商店更改中有一个特定的值，然后观察相关组件中的值，如下所示：

Vue.component('comp-2', {
  ...
  watch: {
    mod1Foo() {
      // do something here when the store value of the getter
      // mod1/getFoo changes
    }
  },
  computed: {
    ...mapGetters({
      mod1Foo: 'mod1/getFoo'
    })
  }
});

这是一个完整的 StackBlitz 示例：https://stackblitz.com/edit/js-gdme1g

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

How should I handle events in Vuex?

vue.js

vuejs2

vuex