Pinia para Vue: defineStore y storeToRefs
Defina un almacén de Pinia con defineStore, acceda a él desde los componentes y use storeToRefs para conservar la reactividad al desestructurar el estado.
Pinia para Vue: defineStore y storeToRefs es una lección gratuita de Frontend 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué es Pinia?
Pinia es la biblioteca oficial de gestión de estado para Vue 3. Reemplaza a Vuex con una API más sencilla y segura en cuanto a tipos, integrada con DevTools y similar a la Composition API.
Instalar Pinia
Instale y registre el plugin de Pinia en la aplicación de Vue.
npm install pinia
// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');defineStore — Estilo Composition API
defineStore crea un store. El estilo Composition API usa ref, computed y funciones directamente, como un composable.
// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useCounterStore = defineStore('counter', () => {
const count = ref(0);
const doubled = computed(() => count.value * 2);
function increment() { count.value++; }
return { count, doubled, increment };
});defineStore — Estilo Options
El estilo Options refleja la Options API de Vue: state() para los datos reactivos, getters (como computed) y actions (como methods).
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
doubled: (state) => state.count * 2,
},
actions: {
increment() { this.count++; },
async fetchAndSet(id: string) {
this.count = await fetchCount(id);
}
}
});Usar un store en un componente
Llame al hook del store dentro de setup(). El store es un objeto reactivo: puede leer el estado y llamar a las acciones directamente.
<script setup>
import { useCounterStore } from '@/stores/counter';
const store = useCounterStore();
</script>
<template>
<p>{{ store.count }}</p>
<button @click="store.increment">+</button>
</template>storeToRefs — Desestructuración segura
La desestructuración directa de un store hace que el estado y los getters pierdan la reactividad (se convierten en valores simples). Use storeToRefs() para desestructurarlos de forma reactiva.
import { storeToRefs } from 'pinia';
const store = useCounterStore();
// Actions can be destructured normally (they're functions):
const { increment } = store;
// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);$patch — Actualizaciones por lotes
store.$patch() aplica varios cambios de estado como una sola operación. Es útil para agrupar actualizaciones relacionadas.
store.$patch({
count: 10,
name: 'Updated'
});
// Or with a function for complex logic:
store.$patch(state => {
state.items.push(newItem);
state.total += newItem.price;
});$subscribe — Observar cambios del store
store.$subscribe(callback) reacciona a cualquier mutación del store, de forma similar a watch de Vue, pero para todo el store.
Plugins de Pinia
Los plugins de Pinia amplían todos los stores. Usos habituales: persistir el estado en localStorage, añadir registros de depuración o inyectar servicios.
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);Pinia DevTools
Pinia se integra con Vue DevTools. Puede inspeccionar el estado del store, ver qué acciones se han llamado y desplazarse en el tiempo entre instantáneas del estado.
Múltiples stores
Cree un store por dominio (useAuthStore, useCartStore, useNotificationStore). Los stores pueden importarse y utilizarse entre sí. La estructura plana de Pinia (sin módulos anidados) simplifica este proceso.
Comprobación rápida
¿Por qué debe utilizar storeToRefs() al desestructurar un store de Pinia?
Resumen: Pinia
defineStore crea stores. Puede utilizar el estilo de Composition API o de Options API. Acceda a ellos con el hook useXxxStore(). Utilice storeToRefs() para desestructurar de forma reactiva. Utilice $patch() para aplicar actualizaciones por lotes. Utilice plugins para la persistencia y otras extensiones. Integración con DevTools. Un store por dominio, sin módulos anidados al estilo de Vuex.
Preguntas frecuentes
¿La lección «Pinia para Vue: defineStore y storeToRefs» es gratis?
Sí — el texto completo de «Pinia para Vue: defineStore y storeToRefs» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Pinia para Vue: defineStore y storeToRefs»?
Defina un almacén de Pinia con defineStore, acceda a él desde los componentes y use storeToRefs para conservar la reactividad al desestructurar el estado. Practicas Frontend 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 Frontend Academy?
No se requiere experiencia previa. Frontend 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 «Pinia para Vue: defineStore y storeToRefs»?
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 Frontend Academy?
Sí. Cada lección de Frontend 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
- Redux Toolkit: createSlice y configureStore
- Zustand para el estado ligero de React
- Pinia para Vue: defineStore y storeToRefs
- Cuándo usar estado global o local