refreshNuxtData é usado para buscar novamente todas ou específicas instâncias de asyncData, incluindo aquelas de useAsyncData, useLazyAsyncData, useFetch e useLazyFetch.

Tipo

refreshNuxtData(keys?: string | string[])

Parâmetros

• keys: Uma única string ou um array de strings como keys que são usadas para buscar os dados. Este parâmetro é opcional. Todas as chaves de useAsyncData e useFetch são buscadas novamente quando nenhuma keys é especificada explicitamente.

Valores de Retorno

refreshNuxtData retorna uma promessa, resolvendo quando todas ou específicas instâncias de asyncData forem atualizadas.

Exemplos

Atualizar Todos os Dados

O exemplo abaixo atualiza todos os dados sendo buscados usando useAsyncData e useFetch na aplicação 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">
      Refetch All Data
    </button>
  </div>
</template>

Atualizar Dados Específicos

O exemplo abaixo atualiza apenas os dados onde a chave corresponde a count e user.

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

async function refresh () {
  refreshing.value = true
  try {
    // você também pode passar um array de chaves para atualizar múltiplos dados
    await refreshNuxtData(['count', 'user'])
  } finally {
    refreshing.value = false
  }
}
</script>

<template>
  <div v-if="refreshing">
    Loading
  </div>
  <button @click="refresh">Refresh</button>
</template>