【问题标题】：Call $emit after dispatch action in Vuejs在 Vuejs 中调度操作后调用 $emit
【发布时间】：2020-02-06 21:51:35
【问题描述】：

我有一个父组件：

<template>
    <div class="w-full">
        <div class="card-body">
            <city-edit-form :form="form" :resource="resource" @save_resource="func">
            </city-edit-form>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        func() {
            console.log("test");
        }
    }
};
</script>

和子组件：

<template>
  <div>
    <form action="#" method="POST" @submit.prevent="submit" v-else>
        <button type="submit" class="btn-green">Save</button>
    </form>
  </div>
</template>

<script>
import { UPDATE_RESOURCE } from "../../../Stores/action-types";

export default {
    props: {
        form: { required: true },
        resource: { required: true }
    },
    methods: {
        submit() {
            this.$store
                .dispatch(`city/${UPDATE_RESOURCE}`, this.form)
                .then(() => this.$emit("save_resource"));
        }
    }
};
</script>

而行动是：

[UPDATE_RESOURCE]({ commit, state }, form) {
    commit(SET_LOADING, true);
    return ResourceService.update(state.resource.id, form)
            .then(({ data }) => {
                commit(SET_RESOURCE, data);
            })
            .catch(errors => {
                commit(SET_ERRORS, errors.response.data);
            })
            .finally(() => commit(SET_LOADING, false));
    });
},

当我提交表单时，动作已经发送，但没有发出任何内容。

没有登录控制台。我哪里出错了？

更新

当我检查 Vue 工具栏的事件选项卡时，我看到了这个：

我认为事件已经发出，但console.log 在控制台中没有任何记录！如此连线！

【问题讨论】：

试试@submit="func()"
你能在dispatch().then()回调中放一个断点吗？
@isebarn 不起作用。
@zero298 我在then 和func 中设置了debugger。但只是第一次调用。
@Chalist，现有代码看起来不错，只是您需要添加一个修复程序。只需在resolve()和reject()前面加上return

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

在触发解析或拒绝时使用 return 关键字

[UPDATE_RESOURCE]({ commit, state }, form) {
    commit(SET_LOADING, true);
    return new Promise((resolve, reject) => {
        ResourceService.update(state.resource.id, form)
            .then(({ data }) => {
                commit(SET_RESOURCE, data);
                return resolve();
            })
            .catch(errors => {
                commit(SET_ERRORS, errors.response.data);
                return reject();
            })
            .finally(() => commit(SET_LOADING, false));
    });
},

【讨论】：

应该只返回由ResourceService.update 生成的Promise 并完全删除显式的Promise 构造函数。
@zero298 删除 Promise，调度后我该怎么做？
@Chalist 与您现在的方式相同，除了不是用 Promise 解决 Promise，您只需返回 Promise ResourceService.update().then().catch().finally() 返回。
@zero298 对不起，我必须离开公司。我尝试提交结果 tomarrow。

【解决方案2】：

你可以使用mapGetters而不是发出事件（这没什么错）

<template>
    <div class="w-full">
        <div class="card-body">
            <city-edit-form :form="form" :resource="myResource">
            </city-edit-form>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {

  computed: {
    ...mapGetters({
      myResource: 'Stores/action-types/SET_RESOURCE',  <---- needs to be modified
    }),
  }
};
</script>

这是假设你已经做了任何吸气剂

【讨论】：

我有mapGetters，但我没有写问题。