refreshNuxtData · Утилиты Nuxt

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

Тип

refreshNuxtData(keys?: string | string[])

Параметры:

keys:
Тип: String | String[]
refreshNuxtData принимает одиночную строку или массив строк в качестве ключей, которые используются для получения данных. Этот параметр является опциональным. Все useAsyncData и useFetch будут повторно получены, если не указаны ключи.

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

Приведенный ниже пример обновляет все данные, получаемые с помощью useAsyncData и useFetch на текущей странице.

pages/some-page.vue

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

<template>
  <div>
    <button :disabled="refreshing" @click="refreshAll">
      Обновить все данные
    </button>
  </div>
</template>

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

В приведенном ниже примере обновляются только те данные, ключ которых совпадает с count.

pages/some-page.vue

<script setup lang="ts">
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
const refresh = () => refreshNuxtData('count')
</script>

<template>
  <div>
    {{ status === 'pending' ? 'Загрузка' : count }}
  </div>
  <button @click="refresh">Обновить</button>
</template>

Узнать больше Docs > Getting Started > Data Fetching.

refreshCookie

Обновляйте значения useCookie вручную, когда cookie изменились

reloadNuxtApp

reloadNuxtApp выполнит жесткую перезагрузку страницы.