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

#