refreshNuxtData

Исходный код
Повторно загружает все или выбранные экземпляры asyncData в Nuxt.

refreshNuxtData повторно запрашивает все или указанные экземпляры asyncData, в том числе созданные через useAsyncData, useLazyAsyncData, useFetch и useLazyFetch.

Если компонент кэшируется <KeepAlive> и переходит в неактивное состояние, asyncData внутри него всё равно будет перезапрашиваться, пока компонент не размонтирован.

Тип

declare function refreshNuxtData (
  keys?: string | string[],
): Promise<void>

Параметры

  • keys: одна строка или массив строк — ключи данных для обновления. Параметр необязательный. Если ключи не указаны, заново запрашиваются все данные из useAsyncData и useFetch.

Возвращаемое значение

refreshNuxtData возвращает промис, который выполнится, когда все или выбранные экземпляры asyncData будут обновлены.

Примеры

Обновление всех данных

Ниже — обновление всех данных, загруженных через useAsyncData и useFetch в приложении Nuxt.

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 для повторной загрузки данных.
Узнать больше Docs > 3 X > Getting Started > Data Fetching.