您如何以及应该如何将事件总线功能移至 Vuex 商店？答案

【问题标题】：How do you and should you move event bus functionality to Vuex store?您如何以及应该如何将事件总线功能移至 Vuex 商店？
【发布时间】：2019-01-19 08:34:25
【问题描述】：

现在我正在使用事件总线从其他不相关的 Vue 组件调用某些 Vue 组件的方法。

我有一个正常运行的 Vuex 商店，所以我试图摆脱事件总线并将这个功能转移到 Vuex 商店。

问题

我应该将事件总线功能移动到 Vuex 商店还是应该同时使用两者？
在 Vuex 商店中实现事件总线功能的最佳方式是什么？
能否提供一个实际示例，说明如何使用 Vuex 在另一个不相关的组件中调用方法：

First.vue

methods: {
  test1 () {
    console.log('test1 was called')
  }
}

Second.vue

methods: {
  callMethodInsideFirstComponent () {
    ...
  }
}

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案1】：

如果您需要事件总线，那么使用它并没有什么坏处。人们遇到的主要问题是 1) 会污染全局事件空间（很明显），2) 如果过于依赖可能会变得难以追踪，以及 2) strong>3) 有与事件名称或意外副作用发生冲突的风险。

Vuex 是一种共享的响应式状态，可在整个应用程序的任何位置访问。关键字是响应式的，不要认为您会在组件之间调用方法，即组件 A 调用在组件 B 中定义的方法。相反，组件 A 将改变组件 B 正在观察的状态树中的给定属性（通常在计算属性或观察者）。

例如：

// First.vue
<template>
   <div>{{ myStoreProp }}</div>
</template>
...
computed: {
    myStoreProp () {
        return this.$store.getters['myModule/myStoreProp']
    }
}

// Second.vue
<template>
    <button @click="updateMyStoreProp('Hello from Second.vue')">Click Me</button>
</template>
...
methods: {
   updateMyStoreProp (value) {
       this.$store.commit('myModule/myStoreProp', value)
   }
}

现在每当 Second.vue 调用它的 updateMyStoreProp 函数时，提交给存储的值将反映在 First.vue 的模板中，在本例中打印“Hello from Second.vue”。

【讨论】：

感谢您的回答，但我需要能够调用方法，而不是更新属性。假设我的First.vue 中有一个大方法，我希望能够传递参数并从Second.vue 调用它，所以我不必将那个大方法复制到每个组件，我可以通过 Vuex 商店做到这一点，还是我必须使用事件总线？
是的，你只需要换个角度看。您传递给该方法的所有数据都可以写入存储，而不是作为参数传递。然后，您可以使用观察者“触发”其他组件方法。一旦触发，该方法就会从存储中读取数据并执行此操作。
但是，这会导致存储操作，这是您应该拥有此方法的理想位置，然后您可以从任何需要它的组件调度对该操作的调用。

【解决方案2】：

您可以使用事件总线来发出和监听事件，但是当您的应用变得复杂时，您应该使用 vuex。使用 vuex API subscribe 使用 vuex 实现事件总线功能。 https://vuex.vuejs.org/api/#subscribe

简单的一步，你在组件A中提交mutation，并在组件B中使用subscribe监听突变。

【讨论】：

请举例说明如何使用subscribe从组件A调用组件B的方法