商店调度后VueJS发出不工作答案

【问题标题】：VueJS emit not working in after store dispatch商店调度后VueJS发出不工作
【发布时间】：2021-09-23 22:36:28
【问题描述】：

我正在使用一个包含模态（子）的 VueJS 组件（父）。后者用于提交数据，然后它应该被自动清理和关闭并在父页面上显示结果。

我在模态框内使用一个表单，提交时它会调度一个存储操作，然后发出一个事件。

如果我在调度之前发出事件，它可以正常工作，但如果我在 then 承诺中执行它，则不会发生任何事情。

父组件

模板

<template>
<div>
    <div v-if="this.status !== 'loading'">
        [...]
        <v-dialog 
            v-model="modalAgregarCuenta"
            fullscreen
            hide-overlay
            transition="dialog-bottom-transition">
            <modal-agregar-cuenta 
                ref="modalAgregarCuenta"
                @closeModal="modalAgregarCuenta = false">
            </modal-agregar-cuenta>
        </v-dialog>
        [...]
    </div>
    [...]
</div>

脚本

<script>
import ModalAgregarCuenta from './ModalAgregarCuentaBancaria';
[...]

export default {
    components: {
        'modal-agregar-cuenta': ModalAgregarCuenta,
        [...]
    },
    data() {
        return {
            modalAgregarCuenta: false,
            [...]
        }
    },
    watch: {
        [...]
        modalAgregarCuenta(){
            if( this.modalAgregarCuenta )
                this.$store.dispatch(TRACKER_EVENT, { "vm": this, "eventName": 'modal-bank-add-open'});
            else
                this.$store.dispatch(TRACKER_EVENT, { "vm": this, "eventName": 'modal-bank-add-close'});
        }
        [...]
    }
    [...]
}

子组件

模板

<template>
<v-card>
    [...]
    <v-container>
        <v-form ref="formulario" v-model="validation" @submit.prevent="submitForm">
            [...]
        </v-form>
    </v-container>
</v-card>

脚本

<script>
    [...]
    methods: {
        submitForm(){
            console.log(this); //<-- Second image
            //this.$emit('closeModal'); //<-- This line works properly

            if(!this.$refs.formulario.validate())
                return;

            this.$store.dispatch(BANK_CREATE_REQUEST, {
                cbu: this.cbu,
                legalNumber: this.accountInformation.legal_number
            })
            .then((res) => {
                this.$emit('closeModal'); //<-- This line does not
                console.log(this); //<-- Third image
                //this.closeModal();
                //this.clear();
                //this.closeModal();
                //this.$emit('closeModal');
                //this.$emit('closeModal');
                /*setTimeout(()=>{
                    //$this.closeModal();
                    this.$emit('closeModal');
                }, 2000);*/
            })
            .catch(err => err);
        },
        closeModal(){
            this.$emit('closeModal');
        },
        clear(){
            this.cbu = '';
            this.legalNumber = '';
        }
    }
    [...]
</script>

如果我检查 Vue Devtools，似乎事件已正确发出，如下图所示：

当我在调度之前和之后使用带有“this”的“console.log”函数时，我还注意到一些奇怪的事情。值得注意的是，在控制台中记录了相同的组件，但某些属性具有不同的值：

之前

之后

更新

[BANK_CREATE_REQUEST]: ({commit}, {cbu, legalNumber}) => {
        commit(BANK_CREATE_REQUEST);
        commit(UI_LOADING, true);
        return apiCall.post(WE_API + '/v3/bank', {
            cbu: cbu,
            legal_number: legalNumber,
            legal_type: null
        })
        .then(res => {
            commit(BANK_CREATE_SUCCESS, res);
            commit(UI_LOADING, false);
            return res;
        })
        .catch(err => {
            commit(BANK_CREATE_ERROR);
            commit(UI_LOADING, false);
            throw err;
        })
    }
    
[BANK_CREATE_REQUEST]: (state) => {
    state.status = 'loading';
},
[BANK_CREATE_SUCCESS]: (state, payload) => {
    state.banks.push(payload.data.model);
    state.status = 'success';
},
[BANK_CREATE_ERROR]: (state) => {
    state.status = 'error';
},

任何帮助将不胜感激。

谢谢。

【问题讨论】：

请显示您的BANK_CREATE_REQUEST 操作。我的猜测是你没有返回一个承诺，或者你正在返回一个永远不会解决的承诺
仅供参考，事件名称最好使用烤肉串，即close-modal 而不是closeModal。见vuejs.org/v2/guide/components-custom-events.html
感谢您提供活动名称的建议，我会记住的。关于操作，我刚刚更新了问题，如果您需要其他任何内容，请告诉我。再次感谢！！
一切看起来都不错（不幸的是）。你有任何错误吗？我会将.catch(err => err) 更改为.catch(err => console.error(err))，但您的BANK_CREATE_ERROR 突变应该已经让您知道是否出了问题
好吧，从昨天开始一直在努力解决这个问题后，我发现了一个 Stack Overflow 帖子，里面有类似的问题 (stackoverflow.com/questions/47519903/…)。不幸的是，问题超出了我们的范围，它与父组件“
”中的这一行有关。因此，当我将 v-if 更改为 v-show 时，它可以正常工作。我认为这可能是一个框架错误或类似的东西。

标签： javascript vue.js eventemitter

【解决方案1】：

请检查“this”的内容 - 我认为当您在承诺中时，您不会找到任何您期望的内容。

这应该可以帮助你：

let tempThis = this;
...
.then((res) => {
            tempThis.$emit('closeModal'); //<-- This line does work now

请记住，您也可以在此处使用 async/await (ES6)，其中不会发生此“问题”，但您必须自己检查响应的状态，否则不会那么容易阅读或任何东西

【讨论】：