refreshNuxtData
refreshNuxtData 用于重新获取所有或特定的 asyncData 实例,包括来自 useAsyncData、useLazyAsyncData、useFetch 和 useLazyFetch 的实例。
¥refreshNuxtData is used to refetch all or specific asyncData instances, including those from useAsyncData, useLazyAsyncData, useFetch, and useLazyFetch.
<KeepAlive> 缓存并进入停用状态,则组件内的 asyncData 仍将被重新获取,直到组件卸载。类型
¥Type
refreshNuxtData(keys?: string | string[])
参数
¥Parameters
keys:用于获取数据的单个字符串或字符串数组,作为keys。此参数为可选。当未明确指定keys时,所有useAsyncData和useFetch键都会重新获取。
返回值
¥Return Values
refreshNuxtData 返回一个 Promise,当所有或特定的 asyncData 实例都已刷新时,它会解析。
¥refreshNuxtData returns a promise, resolving when all or specific asyncData instances have been refreshed.
示例
¥Examples
刷新所有数据
¥Refresh All Data
以下示例刷新了 Nuxt 应用中使用 useAsyncData 和 useFetch 获取的所有数据。
¥This example below refreshes all data being fetched using useAsyncData and useFetch in Nuxt application.
<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>
刷新特定数据数据
¥Refresh Specific Data
以下示例仅刷新键与 count 和 user 匹配的数据。
¥This example below refreshes only data where the key matches to count and user.
<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 方法作为重新获取数据的首选方式。