refreshNuxtData se utiliza para volver a obtener todas o específicas instancias de asyncData, incluidas aquellas de useAsyncData, useLazyAsyncData, useFetch y useLazyFetch.

Tipo

refreshNuxtData(keys?: string | string[])

Parámetros

• keys: Una sola cadena o un arreglo de cadenas como keys que se utilizan para obtener los datos. Este parámetro es opcional. Todas las claves de useAsyncData y useFetch se vuelven a obtener cuando no se especifican keys explícitamente.

Valores de Retorno

refreshNuxtData devuelve una promesa, que se resuelve cuando todas o específicas instancias de asyncData han sido refrescadas.

Ejemplos

Refrescar Todos los Datos

Este ejemplo a continuación refresca todos los datos que se están obteniendo usando useAsyncData y useFetch en la aplicación Nuxt.

<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">
      Refrescar Todos los Datos
    </button>
  </div>
</template>

Refrescar Datos Específicos

Este ejemplo a continuación refresca solo los datos donde la clave coincide con count y user.

<script setup lang="ts">
const refreshing = ref(false)

async function refresh () {
  refreshing.value = true
  try {
    // también podrías pasar un arreglo de claves para refrescar múltiples datos
    await refreshNuxtData(['count', 'user'])
  } finally {
    refreshing.value = false
  }
}
</script>

<template>
  <div v-if="refreshing">
    Cargando
  </div>
  <button @click="refresh">Refrescar</button>
</template>