Qué es y cómo el gestor de estado Pinia en Vue.js

Pinia es el sistema de gestión de estado oficial para Vue.js, diseñado para ser intuitivo, flexible y compatible con TypeScript

Pinia fue creada por Eduardo San Martin Morote, un miembro del equipo central de Vue.js, y se convirtió en la solución oficial de gestión de estado para Vue 3 en noviembre de 2021.

Diseñada específicamente las nuevas funcionalidades de Vue 3, Pinia aprovecha todas las características que ofrece esta versión del framework, con mejor soporte para TypeScript y una integración más fluida con la Composition API.

Instalación y configuración de Pinia

Para comenzar, necesitamos instalar Pinia en nuestro proyecto. Si aún no lo tienes agregado, puedes hacerlo haciendo,

npm install pinia

Una vez instalado, debemos configurar Pinia en nuestra aplicación Vue. En el archivo principal (main.js o main.ts), importa y usa Pinia:

import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

Creación de un Store en Pinia

En Pinia, un store es un contenedor reactivo que guarda el estado y la lógica de negocio.

Vamos a ver cómo crear un store básico con un ejemplo sencillo que gestionaría el estado de usuarios.

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
    currentUser: null,
  }),
  actions: {
    async fetchUsers() {
      const response = await fetch('/api/users');
      this.users = await response.json();
    },
    setCurrentUser(user) {
      this.currentUser = user;
    },
  },
  getters: {
    activeUsers: (state) => state.users.filter(user => user.isActive),
  },
});

Partes de una store

Acabamos de ver como la store está compuesta por ciertas partes o “apartados” (opcionales todas). Estas partes son,

Vamos a ver cada una de ellas en detalle,

userStore.setCurrentUser({ id: 1, name: 'John Doe' });

actions: {
  async fetchUsers() {
    try {
      const response = await fetch('/api/users');
      this.users = await response.json();
    } catch (error) {
      console.error('Error fetching users:', error);
    }
  },
},

// stores/counter.js
getters: {
  multiplyBy: (state) => (factor) => state.count * factor,
}

Uso del Store en Componentes

Para usar el store en un componente, simplemente importamos y llamamos al store:

<script setup>
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();

// Acceder al estado
console.log(userStore.users);

// Llamar a una acción
userStore.fetchUsers();

// Usar un getter
console.log(userStore.activeUsers);
</script>

Modificar el estado

Lógicamente, vamos a querer modificar el estado de la store. En Pinia tenemos varias formas de hacerlo.

const counter = useCounterStore()
counter.increment()

counterStore.count++; // ✅ Funciona (reactividad mantenida)

counterStore.$reset(); // Vuelve al estado inicial

// Pasando un objeto
counter.$patch({
  count: counter.count + 1,
  name: 'Nuevo nombre'
})

// Pasando una función (más eficiente para cambios en arrays)
counter.$patch((state) => {
  state.count++
  state.items.push({ id: state.nextId++, text: 'Nuevo item' })
})

Reactividad al estado

Ahora vamos a querer que nuestra App reaccione a los cambios en la store. Es decir, vamos a querer mantener la reactividad en nuestros componentes.

Pinia proporciona un helper llamado storeToRefs que convierte automáticamente todas las propiedades del state y los getters en refs reactivas.

<script setup>
import { useUserStore } from '@/stores/user';
import { storeToRefs } from 'pinia';

const userStore = useUserStore();

const { users, currentUser, activeUsers } = storeToRefs(userStore);

// Las actions se usan directamente desde el store
userStore.fetchUsers();
</script>

const { users, currentUser } = userStore; // ⚠️ Esto rompe la reactividad

Suscripciones a cambios de estado

Pinia también permite suscribirse a cambios en el estado del store. Bajo el capó, es el equivalente a usar un watch.

const unsubscribe = counter.$subscribe((mutation, state) => {
  // Se ejecuta cuando el estado cambia
  console.log('Estado actualizado:', state)
  console.log('Mutación:', mutation)
  
  // Opcionalmente, puedes guardar el estado en localStorage
  localStorage.setItem('counter', JSON.stringify(state))
})

// Más tarde puedes cancelar la suscripción
unsubscribe()

Uso de múltiples stores

En aplicaciones grandes, es común dividir el estado en múltiples stores. Pinia facilita esta organización al permitir que cada store sea independiente.

Por ejemplo, podríamos tener un store para usuarios, otro para productos y otro para la configuración de la aplicación.

// stores/
export const useUserStore = defineStore('user', {
  state: () => ({
    users: [],
  }),
});

export const useProductStore = defineStore('product', {
  state: () => ({
    products: [],
  }),
});