refreshNuxtData
Nuxtで全てまたは特定のasyncDataインスタンスをリフレッシュする
refreshNuxtDataは、useAsyncData、useLazyAsyncData、useFetch、useLazyFetchからのものを含む、全てまたは特定のasyncDataインスタンスを再取得するために使用されます。
コンポーネントが<KeepAlive>によってキャッシュされ、非アクティブ状態に入った場合でも、コンポーネントがアンマウントされるまで、その中のasyncDataは再取得され続けます。
型
refreshNuxtData(keys?: string | string[])
パラメータ
keys: データを取得するために使用されるkeysとしての単一の文字列または文字列の配列。このパラメータはオプションです。keysが明示的に指定されていない場合、全てのuseAsyncDataおよびuseFetchのキーが再取得されます。
戻り値
refreshNuxtDataはプロミスを返し、全てまたは特定のasyncDataインスタンスがリフレッシュされたときに解決されます。
例
全てのデータをリフレッシュ
以下の例では、NuxtアプリケーションでuseAsyncDataとuseFetchを使用して取得されている全てのデータをリフレッシュします。
pages/some-page.vue
<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">
全てのデータを再取得
</button>
</div>
</template>
特定のデータをリフレッシュ
以下の例では、キーがcountとuserに一致するデータのみをリフレッシュします。
pages/some-page.vue
<script setup lang="ts">
const refreshing = ref(false)
async function refresh () {
refreshing.value = true
try {
// 複数のデータをリフレッシュするためにキーの配列を渡すこともできます
await refreshNuxtData(['count', 'user'])
} finally {
refreshing.value = false
}
}
</script>
<template>
<div v-if="refreshing">
ローディング中
</div>
<button @click="refresh">リフレッシュ</button>
</template>
asyncDataインスタンスにアクセスできる場合は、そのrefreshまたはexecuteメソッドを使用してデータを再取得することを推奨します。
※このページは Nuxt.js 公式ドキュメントの翻訳ページです。
公式ドキュメントの該当ページはこちら：
https://nuxt.com/docs/3.x/api/utils/refresh-nuxt-data