问题

我应该将事件总线功能移至Vuex存储还是应该同时使用两者？
在Vuex存储中实现事件总线功能的最佳方法是什么？
能否请您给出一个实际的示例，说明如何使用Vuex在另一个不相关的组件内调用方法：

First.vue

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

Second.vue

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

Answer 1

如果您需要事件总线，则使用事件总线没有任何危害。人们遇到的主要问题是 1），他们污染了全球事件空间（很明显）， 2），如果过分依赖可能会变得难以跟踪，并且< strong> 3）可能会与事件名称或意外的副作用发生冲突。

Vuex是共享的反应状态，可在整个应用程序中的任何位置访问。关键字是反应性的，不要以为您将在组件之间调用方法，即组件A调用了组件B中定义的方法。相反，组件A会改变状态树中组件B正在观察的给定属性（通常在组件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”。

Answer 2

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

简单的步骤，就是在组件A中提交mutation，并使用subscribe来监听组件B中的突变。

您如何将事件总线功能移至Vuex商店？

问题

First.vue

Second.vue

2 个答案: