<template>
    <div>
        <basic-info v-if="pBasicInfoVO.isShow"></basic-info>
        <sku-info v-if="pSkuInfoListVO.isShow"></sku-info>
        <delivery-info v-if="pDeliveryInfoVO.isShow"></delivery-info>
        <ware-house v-if="pWarehouseInfoVO.isShow"></ware-house>
        <description-info v-if="pDescriptionsInfoVO.isShow"></description-info>
        <account-info v-if="pManAccountVO.isShow"></account-info>
        <ordiary-info v-if="pOrdinaryAttrInfoVO.isShow"></ordiary-info>
        <business-relate v-if="pBusinessRelateInfoVO.isShow"></business-relate>
        <div class="footer">
            <a href="javascript:;" class="btn btn-success" @click="saveWarePublishVO">Save</a>
            <a href="javascript:;" class="btn btn-cancel">Cancel</a>
        </div>
    </div>
</template>

有以上导航页面，点击save的时候，取反isValidate：

saveWarePublishVO() {
        this.setIsValidate(!this.isValidate)
        let isBasicInfoVOValid = this.basicInfoVO.validateFlag
        let isSkuInfoVOValid = this.skuInfoListVO.validateFlag
    
        this.$store.dispatch(type.SAVE_WARE_INFO)
    }
 

然后每个组件监听isValidate字段,设置各个模块的有效标志位：

watch: {
    isValidate() {
        this.$validator.validateAll().then((flag) => {
            if (!isRepeate && flag) {
                this.setBasicInfoValidateFlag(flag)
            }
        })
    }
}

但是由于vee-validate方法中的validateAll是异步执行的，点击save的时候是同步执行的，导致第一次点击save不会触发watch,请问如何解决这个问题？