Nuxt 3: useAsyncData und $fetch funktionieren nur einmal

Question

Ich verwende Nuxt 3 in einem Projekt und möchte eine Anfrage an eine Typoskriptdatei im /server/api/-Verzeichnis stellen. Aber wenn ich das in der Datei app.vue mache:

<script setup lang="ts">
const createPerson = async () => {
    console.log('create person')
    const data = await useAsyncData('createPerson', () => $fetch('/api/file', {
        method: 'POST',
        headers: useRequestHeaders(['cookie']),
        body: JSON.stringify({
            lastname: fields.value.lastname,
            firstname: fields.value.firstname,
            age: fields.value.age,
            x: fields.value.x,
            y: fields.value.y,
            bio: fields.value.bio
        })
    }))
    console.log(data)
}
</script>

Wenn ich diese Funktion createPerson aufrufe:

<button @click="createPerson">Apply</button>

Meine App ruft „/api/file“ nur einmal ab und ruft es nicht erneut ab. Wenn ich die von useAsyncData bereitgestellte Aktualisierungsfunktion verwende, habe ich zwei Abrufe, wenn auf die Schaltfläche zum ersten Mal geklickt wird, und einen Abruf danach.

Answer 1

要回答您的问题，您需要添加一个密钥来使用AsyncData来强制刷新您的请求。未发生重新获取的原因是 createPerson 作为密钥保持不变，因此不会执行重新获取。 因此，您所需要做的就是使用您喜欢的 useAsyncData 方法生成随机密钥

<script setup lang="ts">
    const createPerson = async () => {
        console.log('create person')
        const data = await useAsyncData(RANDOM_KEY, () => $fetch('/api/file', {
            method: 'POST',
            headers: useRequestHeaders(['cookie']),
            body: JSON.stringify({
                lastname: fields.value.lastname,
                firstname: fields.value.firstname,
                age: fields.value.age,
                x: fields.value.x,
                y: fields.value.y,
                bio: fields.value.bio
            })
        }))
        console.log(data)
    }
    </script>

您还可以选择使用刷新功能，而不必担心密钥。检查此文档 https://nuxt.com/docs/getting -started/data-fetching#refreshing-data