我应该如何处理 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 和事件总线是两个不同的东西，从某种意义上说，vuex 管理应用程序的中心状态，而事件总线用于在应用程序的不同组件之间进行通信。

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

正如文档所说：

作用类似于突变，区别在于：

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

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

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