refreshNuxtData
refreshNuxtData заново получает все данные с сервера и обновляет страницу.
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>