Pinia frente a Vuex: por qué cambiar
Sin mutations, inferencia de TypeScript, compatibilidad con devtools, API más sencilla y modularidad predeterminada
Pinia frente a Vuex: por qué cambiar es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 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.
Por qué Pinia reemplazó a Vuex
Pinia es la biblioteca oficial de gestión del estado para Vue 3 y se recomienda en lugar de Vuex. Conserva las ventajas de Vuex, pero elimina el código repetitivo y los aspectos que dificultaban el uso de TypeScript.
No más mutations
Vuex exigía mutations como única forma de cambiar el estado. Pinia las elimina por completo: las actions modifican el state directamente. Menos formalidades, menos archivos y el mismo seguimiento en Devtools.
// Vuex: state -> mutation -> action (3 steps)
// Pinia: action mutates state directly (1 step)
actions: {
increment() {
this.count++ // direct, no commit needed
}
}Inferencia de TypeScript integrada
En Vuex, definir los tipos del store era complicado y requería wrappers complejos. Pinia infiere los tipos automáticamente a partir de su state, sus getters y sus actions, sin ninguna capa adicional de tipado.
const store = useCounterStore()
store.count // inferred as number
store.doubled // inferred from getter
store.increment() // fully typed actionModular por diseño
Vuex utilizaba un único store con modules anidados y problemas de namespacing. Pinia es modular por naturaleza: un archivo por store, cada uno creado con su propio defineStore. No requiere un registro central.
// stores/counter.js
export const useCounterStore = defineStore(...)
// stores/user.js
export const useUserStore = defineStore(...)No se necesita namespacing
Como cada store es independiente y se importa donde se utiliza, no hay ningún espacio de nombres global que gestionar. Solo tiene que importar el store que desee y llamarlo como una función.
import { useUserStore } from '@/stores/user'
const user = useUserStore()Compatibilidad con Devtools
Pinia se integra con Vue Devtools igual que lo hacía Vuex. Obtiene una línea temporal de las actions, inspección del state y depuración con viaje en el tiempo, sin tener que escribir mutations.
Bundle más pequeño
Pinia es aproximadamente 1KB más pequeño que Vuex y es compatible con tree-shaking. Los stores que nunca importa no se incluyen en el bundle final.
API más sencilla
No hay código repetitivo de mapState, mapGetters ni mapActions. Llame al composable del store dentro de setup y use directamente el objeto devuelto.
const counter = useCounterStore()
// access state, getters, and actions on one objectFunciona con ambas API
Pinia admite la Options API y la Composition API. Los dos estilos para escribir un store son el store de opciones (objeto) y el store de setup (función), que se explicarán más adelante en este curso.
Instalar Pinia
Añada Pinia a su aplicación creando la instancia y registrándola como plugin. A partir de ese momento, cualquier componente puede usar cualquier store.
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(createPinia()).mount('#app')Cuándo utilizar Pinia
Use Pinia cuando el estado deba compartirse entre muchos componentes, sobrevivir a cambios de ruta o inspeccionarse en Devtools. Para el estado local de un solo componente, un ref normal sigue siendo más sencillo.
Comprobación rápida
Compruebe su comprensión de por qué Pinia reemplazó a Vuex.
Recapitulación
Pinia es la opción moderna para gestionar el estado en Vue 3:
- Sin mutations: las actions modifican el state directamente.
- Inferencia automática de TypeScript, sin wrappers.
- Modular: un store por archivo, sin namespacing.
- Compatibilidad completa con Devtools y un bundle aproximadamente 1KB más pequeño.
Preguntas frecuentes
¿La lección «Pinia frente a Vuex: por qué cambiar» es gratis?
Sí — el texto completo de «Pinia frente a Vuex: por qué cambiar» 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 «Pinia frente a Vuex: por qué cambiar»?
Sin mutations, inferencia de TypeScript, compatibilidad con devtools, API más sencilla y modularidad predeterminada 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 1 de 4.
¿Cuánto tiempo toma la lección «Pinia frente a Vuex: por qué cambiar»?
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