代码之家 › 专栏 › 技术社区 › Artur Müller Romanov

如何在Vue3中等待异步发射?

vuejs3 async-await asynchronous vue.js javascript

0

Artur Müller Romanov · 技术社区 · 4 年前

我正在触发 submit 来自父组件的事件,该组件发出 image data-url 和 body text 从两个子组件到父组件:

<ImgUploadComponent :triggerEmit="state.submit" @emitImage="getImage"/>
  
<EditorComponent :triggerEmit="state.submit" @emitBody="getBody"/>

图像和身体是通过以下功能获取的:

const getImage = async (image) => {
    form.image = await image
    // arrives after storeRecord
}

const getBody = async (body) => {
    form.body = await body
    // arrives before storeRecord
}

并在此函数中发送到数据库:

const storeRecord = async () => {
    state.submit = true
    await getImage
    await getBody
    console.log(form.image) // returns undefined
    form.post('/admin/posts')
}

问题是 body 在之前到达 form.post 已发送,但 image 之后到达。当我写这个函数的时候,它曾经工作过,但现在不行了,我不明白为什么。你怎么做得对?

0 回复 | 直到 4 年前

1

0

Artur Müller Romanov 4 年前

由于@Estus的建议,我可以使用 watcher 解决我的问题:

const storeRecord = () => {
    state.submit = true
    watch(() => form.image, () => {
        form.post('/admin/kreationen')
    })
}

const getImage = (image) => {
    form.image = image
}

const getBody = (body) => {
    form.body = body
}