javascript - 在 axios 调用中，事件永远不会在 VueJS 中发出

Question

我有一个组件需要在开始时初始化数据，它对数据进行一些转换(基于保存在 localstorage 中的一些值以将这些数据标记为已选中)。

使用 Vue 2.5。

// component.vue

import Vue from 'vue'

export default Vue.extend({
  data() {
    fetchedData: [],
  },

  mounted() {
    this.getStuff()

    window.Bus.$on('localStorageRefreshed', this.getStuff)
  },

  computed: {
    selectedData() {
      return this.fetchedData.filter(data => data.selected)
    }
  },

  methods: {
    getStuff() {
      const doTransformations = function (res, existing) {
        // blabla
      }

      axios.get('/endpoint/for/stuff/').then(result => {
        doTransformations(result, this.fetchedData) // not exactly what happens, but I think this is unneeded to solve my problem. mostly there to illustrate how this all fits together.
        window.Bus.$emit('stuffFetched', this.selectedData)
      })
    },
  }
})

所以 window.Bus 是一个 Vue 实例，它只是伪装成一个全局事件处理程序。在我的 getStuff 方法中，事件从未发出，我也不知道为什么。我在各处都进行了控制台登录，以便确定总线是否未初始化(是，因为我有大量组件可以完美配合)。该事件从未发出。我已经尝试将发射包装在 $nextTick 中，但这也不起作用(我也尝试直接在 mounted-lifecycle 方法中执行此操作，因为计算属性会更新在 Vue devtools 中，它应该包含所有正确的东西)。

我真的不知所措，一切似乎都正常，但事件甚至没有在 Vue devtools 中注册。

我需要触发此事件的原因是为了对存在于此子项及其父项范围之外的另一个组件进行一些价格计算。仅在子作用域中发出 (this.$emit('dataChanged')) 也不会使用这种方法发出事件。

有人知道我这该死的大脑对我做了什么吗？

Answer 1

您是否尝试使用异步等待？我可能会做超时工作，比如:

async mounted() {
  await this.getStuff()

  window.Bus.$on('localStorageRefreshed', this.getStuff)
}

然后在你的 getStuff 上也这样做:

async getStuff() {
  const doTransformations = function (res, existing) {
    // blabla
  }

  await axios.get('/endpoint/for/stuff/').then(result => {
      doTransformations(result, this.fetchedData) // not exactly what happens, 
           but I think this is unneeded to solve my problem. mostly there to 
           illustrate how this all fits together.
    window.Bus.$emit('stuffFetched', this.selectedData)
  })
}