Uso

El composable useNuxtData se utiliza para acceder al valor en caché actual de los composables de obtención de datos como useAsyncData, useLazyAsyncData, useFetch y useLazyFetch. Al proporcionar la clave utilizada durante la obtención de datos, puedes recuperar los datos en caché y utilizarlos según sea necesario.

Esto es particularmente útil para optimizar el rendimiento reutilizando datos ya obtenidos o implementando características como Actualizaciones Optimistas o actualizaciones de datos en cascada.

Para usar useNuxtData, asegúrate de que el composable de obtención de datos (useFetch, useAsyncData, etc.) haya sido llamado con una clave proporcionada explícitamente.

Parámetros

• key: La clave única que identifica los datos en caché. Esta clave debe coincidir con la utilizada durante la obtención de datos original.

Valores de Retorno

• data: Una referencia reactiva a los datos en caché asociados con la clave proporcionada. Si no existen datos en caché, el valor será null. Este Ref se actualiza automáticamente si los datos en caché cambian, permitiendo una reactividad sin problemas en tus componentes.

Ejemplo

El ejemplo a continuación muestra cómo puedes usar datos en caché como un marcador de posición mientras se obtienen los datos más recientes del servidor.

// Podemos acceder a los mismos datos más tarde usando la clave 'posts'
const { data } = await useFetch('/api/posts', { key: 'posts' })

// Acceso al valor en caché de useFetch en posts.vue (ruta padre)
const { data: posts } = useNuxtData('posts')

const route = useRoute()

const { data } = useLazyFetch(`/api/posts/${route.params.id}`, {
  key: `post-${route.params.id}`,
  default() {
    // Encuentra el post individual del caché y configúralo como el valor predeterminado.
    return posts.value.find(post => post.id === route.params.id)
  }
})

Actualizaciones Optimistas

El ejemplo a continuación muestra cómo se pueden implementar Actualizaciones Optimistas usando useNuxtData.

Las Actualizaciones Optimistas son una técnica donde la interfaz de usuario se actualiza inmediatamente, asumiendo que una operación en el servidor tendrá éxito. Si la operación finalmente falla, la UI se revierte a su estado anterior.

// Podemos acceder a los mismos datos más tarde usando la clave 'todos'
const { data } = await useAsyncData('todos', () => $fetch('/api/todos'))

const newTodo = ref('')
let previousTodos = []

// Acceso al valor en caché de useAsyncData en todos.vue
const { data: todos } = useNuxtData('todos')

async function addTodo () {
  return $fetch('/api/addTodo', {
    method: 'post',
    body: {
      todo: newTodo.value
    },
    onRequest () {
      // Almacena el valor en caché previamente para restaurarlo si la obtención falla.
      previousTodos = todos.value

      // Actualiza optimistamente los todos.
      todos.value = [...todos.value, newTodo.value]
    },
    onResponseError () {
      // Revertir los datos si la solicitud falló.
      todos.value = previousTodos
    },
    async onResponse () {
      // Invalidar los todos en segundo plano si la solicitud tuvo éxito.
      await refreshNuxtData('todos')
    }
  })
}

Tipo

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