mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-12 23:37:14 +00:00
2.0 KiB
2.0 KiB
title | description | links | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
refreshNuxtData | refreshNuxtData refetches all data from the server and updates the page. |
|
::note
refreshNuxtData
re-fetches all data from the server and updates the page as well as invalidates the cache of useAsyncData
, useLazyAsyncData
, useFetch
and useLazyFetch
.
::
Type
refreshNuxtData(keys?: string | string[])
Parameters:
-
keys
:Type:
String | String[]
refreshNuxtData
accepts a single or an array of strings askeys
that are used to fetch the data. This parameter is optional. AlluseAsyncData
anduseFetch
are re-fetched when nokeys
are specified.
Refresh All Data
This example below refreshes all data being fetched using useAsyncData
and useFetch
on the current page.
<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">
Refetch All Data
</button>
</div>
</template>
Refresh Specific Data
This example below refreshes only data where the key matches to count
.
<script setup lang="ts">
const { status, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))
const refresh = () => refreshNuxtData('count')
</script>
<template>
<div>
{{ status === 'pending' ? 'Loading' : count }}
</div>
<button @click="refresh">Refresh</button>
</template>
:read-more{to="/docs/getting-started/data-fetching"}