¿Cuándo cargarías datos en la ruta, en el store o dentro del componente?

Detrás de "¿Cuándo cargarías datos en la ruta, en el store o dentro del componente?" suele haber una tensión real en Vue entre enrutamiento y datos loading.

En un nivel intermedio interesa ver si colocas bien los límites de "Cuándo cargarías datos en la ruta, en el store o dentro del componente", justificas por qué eliges ese patrón y explicas cómo lo mantendrías legible para el equipo.

Qué evalúa el entrevistador

• Si distingues qué parte de "Cuándo cargarías datos en la ruta, en el store o dentro del componente" pertenece a enrutamiento y cuál debería resolverse en datos loading.
• Si conviertes la respuesta en criterios observables: límites claros, impacto en el mantenimiento y forma de detectar regresiones.
• Si identificas la fuente de verdad, el estado derivado y los puntos donde podría aparecer sincronización manual o duplicada.

Respuesta sólida

• Nombra primero la fuente de verdad y deja claro qué datos deberían derivarse en vez de almacenarse dos veces.
• Explica dónde viviría cada pieza de estado: local si solo afecta a una interacción, compartido si cruza componentes y remoto si depende del servidor.
• Añade cómo evitarías sincronizaciones manuales, renders accidentales y errores por datos obsoletos.

Compromisos y errores comunes

• Duplicar estado entre store, formularios, URL o caché acaba generando inconsistencias que son difíciles de reproducir.
• Mover demasiado pronto una preocupación al estado global hace visible el problema, pero no lo arregla.

Ejemplo de código

Este fragmento sirve para bajar "Cuándo cargarías datos en la ruta, en el store o dentro del componente" a código ejecutable y mostrar qué decisiones conviene hacer explícitas cuando enrutamiento empieza a cruzarse con datos loading.

<script setup lang="ts">
import { computed, ref } from 'vue';

const query = ref('');
const products = ref(['Vue', 'Pinia', 'Vitest']);
const filteredProducts = computed(() =>
  products.value.filter((product) => product.toLowerCase().includes(query.value.toLowerCase())),
);
</script>

<template>
  <input v-model="query" placeholder="Buscar" />
  <ul>
    <li v-for="product in filteredProducts" :key="product">{{ product }}</li>
  </ul>
</template>

Fíjate en que el ejemplo deja claras las fronteras de "Cuándo cargarías datos en la ruta, en el store o dentro del componente", nombra los estados relevantes y evita trabajo implícito que luego cuesta depurar.

Ejemplo o caso real

Un caso creíble para "¿Cuándo cargarías datos en la ruta, en el store o dentro del componente?" aparece cuando una funcionalidad de Vue mezcla enrutamiento con datos loading y el equipo empieza a tocar demasiados puntos para un cambio pequeño. Ahí conviene probar la solución sobre una pantalla o flujo acotado, medir si reduce fricción y solo después extender el patrón.

Frase corta de entrevista

Si una decisión de Vue no mejora claridad, coste de cambio o fiabilidad, probablemente aún no merece existir.