¿Cómo modelarías estados asíncronos, cancelación y condiciones de carrera dentro de un composable?

Respuesta

• Modela al menos estado pendiente, éxito y error, y decide qué dato puede considerarse vigente cuando varias peticiones compiten.
• Usa AbortController, identificadores de petición o una política explícita de “la última gana” para cancelar o ignorar respuestas obsoletas.
• Centraliza la escritura final del estado para que no haya varias ramas asíncronas compitiendo por el mismo ref.

Puntos clave

• computed debe ser puro y servir para derivar; cuando introduces efectos laterales ahí, el modelo mental deja de ser fiable.
• watch y watchEffect son herramientas para sincronizar con el exterior, no para construir una cadena de estado derivado.
• En Vue conviene distinguir siempre fuente de verdad, dato derivado y efecto externo porque casi todos los bugs reactivos rompen una de esas fronteras.

Errores comunes

• Usar watchers para derivar datos que podrían salir de computed introduce sincronizaciones manuales y fallos difíciles de seguir.
• Copiar valores reactivos a variables locales sin toRefs o storeToRefs rompe la relación con la fuente de verdad.

Ejemplo de código

export function useUserSearch() {
  const query = ref("");
  const results = ref<User[]>([]);

  watch(query, async (value, _, onCleanup) => {
    const controller = new AbortController();
    onCleanup(() => controller.abort());
    results.value = await fetchUsers(value, controller.signal);
  });
}

Ejemplo o caso real

En una pantalla con filtros, carga remota y varios estados locales, estas decisiones afectan directamente a si la UI se mantiene estable o empieza a comportarse de forma impredecible.

Idea clave

Si separo fuente de verdad, derivación y efecto, la mayoría de problemas reactivos pierden fuerza.