Nuxt 3：useAsyncData 与 $fetch 只能工作一次

Question

我在一个项目中使用 nuxt 3，我想向 /server/api/ 目录中的打字稿文件发出请求。但是当我在文件 app.vue 中这样做时：

<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>

当我调用这个函数createPerson时：

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

我的应用程序仅获取“/api/file”一次，并且不会重新获取。如果我使用 useAsyncData 提供的刷新功能，第一次单击按钮时我有两次获取，一次获取后。

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