refreshNuxtData

Source
Обновление всех или выбранных экземпляров asyncData в Nuxt.

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

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

Тип

Signature
export function refreshNuxtData (keys?: string | string[])

Параметры

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

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

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

Примеры

Обновить все данные

Пример перезапроса всех данных, загружаемых через 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"
    >
      Обновить все данные
    </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 {
    await refreshNuxtData(['count', 'user'])
  } finally {
    refreshing.value = false
  }
}
</script>

<template>
  <div v-if="refreshing">
    Загрузка…
  </div>
  <button @click="refresh">
    Обновить
  </button>
</template>
Если доступен экземпляр asyncData, предпочтительнее вызывать его метод refresh или execute.
Узнать больше Docs > 4 X > Getting Started > Data Fetching.