Question

refreshNuxtData 从服务器重新获取所有数据并更新页面。

refreshNuxtData 从服务器重新获取所有数据并更新页面

同时使 useAsyncData、useLazyAsyncData、useFetch 和 useLazyFetch 的缓存失效。

Type

ts

refreshNuxtData(keys?: string | string[])

参数:

• keys:
  类型: String | String[]
refreshNuxtData 接受单个或字符串数组作为用于获取数据的keys。
  此参数是可选的。 当未指定 keys 时，将重新获取所有 useAsyncData 和 useFetch。

示例

刷新所有数据

下面的示例刷新了当前页面上使用 useAsyncData 和 useFetch 获取的所有数据。

pages/some-page.vue

<template>
  <div>
    <button :disabled="refreshing" @click="refreshAll">
      Refetch All Data
    </button>
  </div>
</template>

<script setup>
const refreshing = ref(false)
const refreshAll = async () => {
  refreshing.value = true
  try {
    await refreshNuxtData()
  } finally {
    refreshing.value = false
  }
}
</script>

刷新特定数据

下面的示例仅刷新键与count匹配的数据。

pages/some-page.vue

<template>
  <div>
    {{ pending ? 'Loading' : count }}
  </div>
  <button @click="refresh">Refresh</button>
</template>

<script setup>
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
const refresh = () => refreshNuxtData('count')
</script>

相关阅读：getting-started > data-fetching