refreshNuxtData

刷新 Nuxt 中所有或特定的 asyncData 实例

refreshNuxtData 用于重新获取所有或特定的 asyncData 实例,包括来自 useAsyncDatauseLazyAsyncDatauseFetchuseLazyFetch 的实例。

¥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 时,所有 useAsyncDatauseFetch 键都会重新获取。

返回值

¥Return Values

refreshNuxtData 返回一个 Promise,当所有或特定的 asyncData 实例都已刷新时,它会解析。

¥refreshNuxtData returns a promise, resolving when all or specific asyncData instances have been refreshed.

示例

¥Examples

刷新所有数据

¥Refresh All Data

以下示例刷新了 Nuxt 应用中使用 useAsyncDatauseFetch 获取的所有数据。

¥This example below refreshes all data being fetched using useAsyncData and useFetch in Nuxt application.

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>

刷新特定数据数据

¥Refresh Specific Data

以下示例仅刷新键与 countuser 匹配的数据。

¥This example below refreshes only data where the key matches to count and user.

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 实例,建议使用其 refreshexecute 方法作为重新获取数据的首选方式。
Read more in Docs > Getting Started > Data Fetching.