Nuxt 3:useAsyncData 與 $fetch 只能工作一次
P粉018548441
P粉018548441 2023-11-04 00:03:52
0
1
677

我在一個專案中使用 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 提供的刷新功能,第一次單擊按鈕時我有兩次獲取,一次獲取後。

P粉018548441
P粉018548441

全部回覆(1)
P粉163465905

要回答您的問題,您需要新增一個金鑰來使用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

#
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板