Nuxt 3 已于 31 July 2026 结束生命周期
此版本将不再接收错误修复或安全补丁。 升级到 Nuxt 4 或获取 HeroDevs 提供的延长支持
refreshNuxtData
在 Nuxt 中刷新所有或特定的 asyncData 实例
Maschinelle Übersetzung ·0 % geprüft
refreshNuxtData 用于重新获取所有或特定的 asyncData 实例，包括来自 useAsyncData、useLazyAsyncData、useFetch 和 useLazyFetch 的实例。
如果你的组件被
<KeepAlive> 缓存并进入停用状态，组件内的 asyncData 仍会被重新获取，直到组件被卸载。类型
Signatur
export function refreshNuxtData (keys?: string | string[])参数
keys：用于获取数据的单个字符串或字符串数组。此参数为可选。如果未明确指定keys，则会重新获取所有useAsyncData和useFetch的键对应的数据。
返回值
refreshNuxtData 返回一个 Promise，当所有或特定的 asyncData 实例刷新完成时解析。
示例
刷新所有数据
以下示例刷新 Nuxt 应用中通过 useAsyncData 和 useFetch 获取的所有数据。
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"
>
重新获取所有数据
</button>
</div>
</template>刷新特定数据
以下示例仅刷新键名匹配 count 和 user 的数据。
pages/some-page.vue
<script setup lang="ts">
const refreshing = ref(false)
async function refresh () {
refreshing.value = true
try {
// 你也可以传入多个键的数组来刷新多条数据
await refreshNuxtData(['count', 'user'])
} finally {
refreshing.value = false
}
}
</script>
<template>
<div v-if="refreshing">
加载中
</div>
<button @click="refresh">
刷新
</button>
</template>如果你能访问到
asyncData 实例，建议通过其 refresh 或 execute 方法来重新获取数据，这是一种更优的方式。