refreshNuxtData
重新整理 Nuxt 中所有或特定的 asyncData 例項
refreshNuxtData 用於重新獲取所有或特定的 asyncData 例項，包括來自 useAsyncData、useLazyAsyncData、useFetch 和 useLazyFetch 的例項。
如果您的元件被
<KeepAlive> 快取並進入停用狀態，元件內部的 asyncData 仍將被重新獲取，直到元件解除安裝。型別
簽名
export function refreshNuxtData (keys?: string | string[])
引數
keys：一個字串或一個字串陣列，用作獲取資料的keys。此引數是可選的。當未明確指定keys時，所有useAsyncData和useFetch鍵都將被重新獲取。
返回值
refreshNuxtData 返回一個 Promise，當所有或特定的 asyncData 例項重新整理完成後解析。
示例
重新整理所有資料
下面的例子重新整理 Nuxt 應用程式中使用 useAsyncData 和 useFetch 獲取的所有資料。
app/pages/some-page.vue
<script setup lang="ts">
const refreshing = ref(false)
async function refreshAll () {
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 和 user 的資料。
app/pages/some-page.vue
<script setup lang="ts">
const refreshing = ref(false)
async function refresh () {
refreshing.value = true
try {
// you could also pass an array of keys to refresh multiple data
await refreshNuxtData(['count', 'user'])
} finally {
refreshing.value = false
}
}
</script>
<template>
<div v-if="refreshing">
Loading
</div>
<button @click="refresh">
Refresh
</button>
</template>
如果您可以訪問
asyncData 例項，建議使用其 refresh 或 execute 方法作為重新獲取資料的首選方式。