refreshNuxtData

Исходники
Refresh all or specific asyncData instances in Nuxt

refreshNuxtData is used to refetch all or specific asyncData instances, including those from useAsyncData, useLazyAsyncData, useFetch, and useLazyFetch.

If your component is cached by <KeepAlive> and enters a deactivated state, the asyncData inside the component will still be refetched until the component is unmounted.

Тип

refreshNuxtData(keys?: string | string[])

Параметры

  • keys: A single string or an array of strings as keys that are used to fetch the data. This parameter is optional. All useAsyncData and useFetch keys are re-fetched when no keys are explicitly specified.

Return Values

refreshNuxtData returns a promise, resolving when all or specific asyncData instances have been refreshed.

Examples

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

This example below refreshes all data being fetched using useAsyncData and useFetch in Nuxt application.

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 and user.

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">
    Загрузка
  </div>
  <button @click="refresh">Обновить</button>
</template>
If you have access to the asyncData instance, it is recommended to use its refresh or execute method as the preferred way to refetch the data.
Узнать больше Docs > Getting Started > Data Fetching.