axios 调用成功后，Vue.js 组件不会发送给父级

Question

我在用

"axios": "^0.19.0",
"vue": "^2.6.10",
"vuex": "^3.1.1"

我的vuex操作如下所示，并使用 调用远程接口axios。该请求确实有效并且收到了有效的响应。

skipQuestion({commit}, payload) {
    let params = {
        answer: {
            id: payload.id,
            skipped: true,
        }
    };

    return new Promise((resolve, reject) => {
        commit(UPDATE_LOADING, true);
        Remote.put(`/answer.json`, params)
            .then((response) => {
                commit(UPDATE_LOADING, false);
                commit(SKIP_QUESTION, payload.id);
                resolve();
            })
            .catch((error) => {
                commit(UPDATE_LOADING, false);
                reject(error);
            })
    })
},

该组件Question确实有以下方法skip，它调用vuex操作skipQuestion并应将skip事件发送到父组件。

...mapActions(['skipQuestion']),
skip(evt) {
    let payload = { id: this.question_id };
    this.skipQuestion(payload).then( () => {
        this.$emit('skip', this.uuid);
    }).catch( (error) => {
        console.log(error);
    });
},

问题是，在操作块skip中使用该事件时，该事件不会发送给父级。thenChrome 的 vue 开发者控制台也确认该skip事件已被触发。如果我将发射放在块之外，一切都会正常。有什么建议吗？出了什么问题？

编辑1

还尝试了以下代码，两个日志语句都打印到控制台。

skip(evt) {
    let payload = { id: this.question_id };
    let vm = this; 
    this.skipQuestion(payload).then( () => {
        console.log('before skip emit');
        vm.$emit('skip', this.uuid);
        console.log('after skip emit');
    }).catch( (error) => {
        console.log(error);
    });
},

编辑2

这是用于监听子事件的模板代码：

<question v-bind="question"
          :key="question.uuid"
          v-if="questionReady"
          v-on:skip="onSkipQuestion"
          v-on:answer="onAnswerQuestion">
</question>

如前所述，如果不使用请求返回的 Promise/then-block axios，emit 就会起作用。您将在下面找到应该调用的方法：

methods: {
  onSkipQuestion(payload) {
    // this code is not executed
    console.log('onSkipQuestion')

    //....
  },


  //....
}      

Answer 1

this您丢失了对then 块内部的引用。引用现在是调用的回调函数。相反，这样做

 ...mapActions(['skipQuestion']),
    skip(evt) {
        let payload = { id: this.question_id };
        let vm = this; // Preserve Vue instance for use inside block
        this.skipQuestion(payload).then( () => {
            vm.$emit('skip', vm.uuid);
        }).catch( (error) => {
            console.log(error);
        });
    },