Composición de stores y acceso entre stores
Uso de un store dentro de otro, patrones de composición de stores y prevención de dependencias circulares
Composición de stores y acceso entre stores es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
Los stores pueden usar otros stores
Las aplicaciones reales tienen varios stores que necesitan utilizarse entre sí. Es posible que un store del carrito necesite el store de autenticación para conocer al usuario actual. Pinia facilita el acceso entre stores.
Llamar a un store dentro de una action
Dentro de una action, llame simplemente al composable del otro store. Como las actions se ejecutan después de que Pinia está activo, es seguro hacerlo.
import { useAuthStore } from './auth'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
checkout() {
const auth = useAuthStore()
if (!auth.isLoggedIn) return
// proceed with auth.userId
}
}
})La sintaxis del store de setup
Además del objeto de opciones, defineStore acepta una función de setup. Se parece al setup de un componente: declare refs y computeds y, después, devuélvalos.
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
return { count }
})El state como refs
En un store de setup, cada ref o reactive que devuelva se convierte en state. Use ref para valores primitivos y reactive para objetos.
export const useUserStore = defineStore('user', () => {
const name = ref('Coddy')
const profile = reactive({ age: 30 })
return { name, profile }
})Los getters como computed
Un computed devuelto actúa como un getter. Se almacena en caché y es reactivo, igual que los getters de un store de opciones.
export const useCounterStore = defineStore('counter', () => {
const count = ref(2)
const doubled = computed(() => count.value * 2)
return { count, doubled }
})Las actions como funciones
Una función devuelta es una action. Puede leer y escribir directamente las refs mediante .value.
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})Devolver refs y computed
La regla clave de los stores de setup es la siguiente: devuelva todo lo que quiera exponer. Todo lo que no devuelva permanece privado dentro del store.
export const useStore = defineStore('s', () => {
const visible = ref(0)
const secret = ref('hidden') // not returned -> private
return { visible }
})Acceso entre stores en un store de setup
En un store de setup puede llamar a otro store en el nivel superior y usarlo en computeds o actions.
export const useCartStore = defineStore('cart', () => {
const auth = useAuthStore()
const canCheckout = computed(() => auth.isLoggedIn)
return { canCheckout }
})Evitar dependencias circulares
Si el store A importa el store B y B importa A, puede encontrarse con una dependencia circular. Evite llamar al otro store en el nivel superior del módulo; llámelo dentro de la action o del getter donde sea necesario.
// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
doWork() {
const other = useOtherStore() // resolved at call time
}
}Por qué ayudan las llamadas diferidas
Llamar al composable del store dentro de una función aplaza la resolución hasta el tiempo de ejecución, después de que se hayan cargado todos los módulos. Esto rompe el ciclo de importación que provoca un fallo durante la evaluación del módulo.
Stores de opciones frente a stores de setup
Ambos estilos ofrecen la misma capacidad. Elija stores de opciones para disponer de una estructura declarativa y familiar; elija stores de setup cuando quiera toda la flexibilidad de la Composition API, como watchers o composables dentro del store.
Comprobación rápida
Ponga a prueba su comprensión de la composición de stores.
Resumen
Ha aprendido a componer stores:
- Llame a otro store composable dentro de una acción para acceder a varios stores.
- Los stores de setup usan una función: los refs son el estado, los computed son getters y las funciones son acciones.
- Devuelva todo lo que quiera exponer.
- Llame a los stores de forma diferida dentro de las funciones para evitar dependencias circulares.
Preguntas frecuentes
¿La lección «Composición de stores y acceso entre stores» es gratis?
Sí — el texto completo de «Composición de stores y acceso entre stores» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Composición de stores y acceso entre stores»?
Uso de un store dentro de otro, patrones de composición de stores y prevención de dependencias circulares Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Composición de stores y acceso entre stores»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Pinia frente a Vuex: por qué cambiar
- defineStore: estado, getters y actions
- Composición de stores y acceso entre stores
- Persistencia y devtools de Pinia