我在一個專案中使用 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 提供的刷新功能，第一次單擊按鈕時我有兩次獲取，一次獲取後。
要回答您的問題，您需要新增一個金鑰來使用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
#