useNuxtData

useNuxtData 는 useAsyncData, useLazyAsyncData, useFetch 및 useLazyFetch 에서 명시적으로 제공된 키를 이용하여 캐시된 값에 접근할 수 있다.

 

사용법

아래 예는 서버에서 최신 데이터를 가져오는 동안 캐시된 데이터를 placeholder 로 사용하는 방법을 보여준다.

<!--
pages/posts.vue
-->

<script setup>
// We can access same data later using 'posts' key
const { data } = await useFetch('/api/posts', { key: 'posts' })
</script>

// pages/posts/[id].vue

// Access to the cached value of useFetch in posts.vue (parent route)
const { id } = useRoute().params
const { data: posts } = useNuxtData('posts')
const { data } = useLazyFetch(`/api/posts/${id}`, {
  key: `post-${id}`,
  default() {
    // Find the individual post from the cache and set it as the default value.
    return posts.value.find(post => post.id === id)
  }
})

 

낙관적 업데이트

데이터가 백그라운드에서 무효화되는 동안 캐시를 활용하여 변형 후 UI를 업데이트할 수 있다.

pages/todos.vue

<script setup>
// We can access same data later using 'todos' key
const { data } = await useAsyncData('todos', () => $fetch('/api/todos'))
</script>

<!-- 
components/NewTodo.vue
-->

<script setup>
const newTodo = ref('')
const previousTodos = ref([])

// Access to the cached value of useFetch in todos.vue
const { data: todos } = useNuxtData('todos')

const { data } = await useFetch('/api/addTodo', {
  method: 'post',
  body: {
    todo: newTodo.value
  },
  onRequest () {
    previousTodos.value = todos.value // Store the previously cached value to restore if fetch fails.

    todos.value.push(newTodo.value) // Optimistically update the todos.
  },
  onRequestError () {
    todos.value = previousTodos.value // Rollback the data if the request failed.
  },
  async onResponse () {
    await refreshNuxtData('todos') // Invalidate todos in the background if the request succeeded.
  }
})
</script>

 

Type

useNuxtData<DataT = any> (key: string): { data: Ref<DataT | null> }