在 Vuejs 中调度操作后调用 $emit

Posted 2023-02-23

【中文标题】在 Vuejs 中调度操作后调用 $emit

【英文标题】：Call $emit after dispatch action in Vuejs

【发布时间】：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

【参考方案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，但我没有写问题。