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 方法作为重新获取数据的首选方式。