Question

在Vue / CLI 4应用程序中在src / App.vue中，我有从服务器检索数据的方法：

mounted() {
    retrieveAppDictionaries(['copyright_text', 'site_heading', 'site_name']);
    bus.$on('appDictionariesRetrieved', (data) => {
        this.copyright_text = data.copyright_text
        this.site_heading = data.site_heading
        this.site_name = data.site_name
    })
}, // mounted() {

在其中一个页面中，我有类似的方法可用于从服务器检索数据，但是具有不同的参数，例如：

mounted() {
    retrieveAppDictionaries(['userTaskTypesLabels']);
    bus.$on('appDictionariesRetrieved', (data) => {
        this.userTaskTypesLabels = data.userTaskTypesLabels
    })

}, // mounted() {

问题在于，在第二种情况下，从src / App.vue检索的appDictionariesRetrieve也被触发，这是错误的。如何停止触发src / App.vue中的appDictionaries？

Answer 1

这是一个侦听器：

bus.$on('appDictionariesRetrieved')

您基本上是在创建2个侦听器，因此它们在接收到消息时都会完成工作。

执行此操作：

将所有数据放入存储中，以便可以从1个组件进行访问
仅用1个组件（在App.vue中）创建此侦听器
发送带有所需数据的侦听器消息

App.vue

mounted() {
  bus.$on('appDictionariesRetrieved', (data) => {
    this.handleRetrieveAppDictionaries(data)
  })
},
methods: {
  handleRetrieveAppDictionaries(data) {
    // Get needed data 
    retrieveAppDictionaries(data.list)

    // Do some work
    if (data.purpose === "purpose1") {
      this.copyright_text = data.copyright_text
      this.site_heading = data.site_heading
      this.site_name = data.site_name
    }
    else if (data.purpose === "purpose2") {
      this.userTaskTypesLabels = data.userTaskTypesLabels
    }
  }
}

您可以在发出侦听器时动态为其指定数据，具体取决于它来自何处：

let data = {
  copyright_text: '',
  site_heading: '',
  site_name: '',
  purpose: 'purpose1',
  list: ['copyright_text', 'site_heading', 'site_name']

}
bus.$emit('appDictionariesRetrieved', data)

Answer 2

export default {
 beforeDestroy() { // just before a component is destroyed.
  bus.$off('appDictionariesRetrieved') // stop listening.
 }
}

假设您正在使用事件总线，则必须为其创建了新的Vue实例。如果我们在组件内发出事件，则在组件被破坏时它将停止侦听该事件。但是，在这种情况下，Vue实例不会被销毁，因此侦听器始终在那里。

因此，当有以下情况时，最好停止听事件组件已销毁，以避免发生与您一样的冲突。

如何停止从基本src / App.vue触发事件？

2 个答案:

App.vue