¿Cómo evitarías perder reactividad al destructurar props, stores o resultados de composables?

Respuesta

• Para props usa toRefs o toRef y para Pinia usa storeToRefs cuando quieras conservar reactividad al separar campos.
• Desestructura métodos del store sin problema, pero el estado reactivo no debería copiarse a variables normales si esperas que siga vivo.
• Si necesitas una copia local, deja claro que ya no representa la fuente de verdad y que tendrás que gestionar su sincronización.

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

const store = useUsersStore();
const { users, selectedId, pending } = storeToRefs(store);

watch(selectedId, (id) => {
  if (id) void store.loadDetails(id);
});

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.