refreshNuxtData
`refreshNuxtData` はサーバーからすべてのデータを再取得し、ページを更新します。
refreshNuxtData はサーバーからすべてのデータを再フェッチし、ページを更新するだけでなく、useAsyncData、useLazyAsyncData、useFetch、useLazyFetch のキャッシュを無効化します。型
refreshNuxtData(keys?: string | string[])
パラメータ
keys:
**型**:String | String[]refreshNuxtDataは、データの取得に使用されるkeysとして、単一の文字列または文字列の配列を受け入れます。このパラメータは**オプション**です。keysが指定されていない場合、すべての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">
Refetch All Data
</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' ? 'Loading' : count }}
</div>
<button @click="refresh">Refresh</button>
</template>