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和event bus是两个不同的东西，因为vuex管理应用程序的中心状态，而事件总线用于在应用程序的不同组件之间进行通信。

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

正如docs所说：

行动类似于突变，区别在于：


不是改变状态，而是提交突变。

操作可以包含任意异步操作。

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

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 背景，在那里对动作产生副作用对我来说很有意义。为了完成这项工作，我在 store 更改中有一个特定的值，然后像这样观察相关组件中的值：

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中的事件？

3 个答案: