useCache()

Renderizado de datos sin el fetch.

Accede a la respuesta de cualquier Endpoint. Devuelve undefined hasta que se obtiene, se establece o se puede inferir a partir de las entities que ya están en el store, y de nuevo tras una invalidación (consulta Comportamiento). Eso significa "no cargado", no "no existe en el servidor", así que úsalo para datos que carga otro código, como el usuario actual que obtiene un flujo de inicio de sesión.

useCache() reacciona a las mutaciones de los datos y vuelve a renderizar solo cuando es necesario.

Uso

UserResource

Unauthed.vue

Authorized.vue

AuthorizedPage.vue

<script setup lang="ts">
  import { useCache } from '@data-client/vue';
  import { UserResource } from './UserResource';
  import Unauthed from './Unauthed.vue';
  import Authorized from './Authorized.vue';

  // currentUser as ComputedRef<User | undefined>
  const currentUser = useCache(UserResource.current);
</script>

<template>
  <!-- currentUser is unwrapped in the template -->
  <Authorized v-if="currentUser" :user="currentUser" />
  <!-- user is not logged in -->
  <Unauthed v-else />
</template>

Consulta el estrechamiento por veracidad para más información sobre el manejo de tipos

Comportamiento

useCache() devuelve un ComputedRef. La tabla de abajo describe su .value.

Estado de caducidad	Devuelve	Condiciones
Inválido	undefined	no está en el store, eliminación, invalidación, invalidIfStale
Obsoleto	desnormalizado	(primer render, cambio de argumentos) & caducidad < ahora
Válido	desnormalizado	finalización del fetch
	undefined	null usado como segundo argumento

Dependencias condicionales

Usar null como segundo argumento de cualquier hook de Data Client significa "no hacer nada".

// todo could be undefined if id is undefined
const todo = useCache(
  TodoResource.get,
  computed(() => (id.value ? { id: id.value } : null)),
);

Tipos

function useCache(
  endpoint: ReadEndpoint,
  ...args: MaybeRefsOrGetters<Parameters<typeof endpoint.key>> | [null]
): ComputedRef<DenormalizeNullable<typeof endpoint.schema>>;

Los argumentos pueden ser valores simples, refs (incluidos los computed) o funciones getter como () => ({ id: props.id }). Un objeto simple como { id: props.id } se lee una sola vez y no seguirá los cambios de props ni de ruta, así que usa un getter o computed cuando un argumento pueda cambiar.

El resultado se actualiza cuando cambian los argumentos.