refreshNuxtData
refreshNuxtData 從伺服器重新提取所有資料並更新頁面。
refreshNuxtData 從伺服器重新提取所有資料並更新頁面，同時也使 useAsyncData 、 useLazyAsyncData、 useFetch 和 useLazyFetch 的快取失效。類型
refreshNuxtData(keys?: string | string[])
參數
keys:
類型：String | String[]refreshNuxtData接受單個或字串陣列作為keys，用於提取資料。此參數為選填。所有useAsyncData和useFetch在沒有指定keys時會重新提取。
重新整理所有資料
以下範例重新整理目前頁面上使用 useAsyncData 和 useFetch 提取的所有資料。
pages/some-page.vue
<script setup lang="ts">
const refreshing = ref(false)
const refreshAll = async () => {
refreshing.value = true
try {
await refreshNuxtData()
} finally {
refreshing.value = false
}
}
</script>
<template>
<div>
<button :disabled="refreshing" @click="refreshAll">
Refetch All Data
</button>
</div>
</template>
重新整理特定資料
以下範例僅重新整理金鑰與 count 相符的資料。
pages/some-page.vue
<script setup lang="ts">
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
const refresh = () => refreshNuxtData('count')
</script>
<template>
<div>
{{ status === 'pending' ? 'Loading' : count }}
</div>
<button @click="refresh">Refresh</button>
</template>