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 方法作为重新获取数据的首选方式。
在文档 > 4 X > 入门 > 数据获取中阅读更多信息。