Adiós Vuex, hola Pinia

¿Recuerdas lo que luchamos con Vuex? Mutaciones interminables, sintaxis extrañas de commit y dispatch, y tipos de TypeScript que se convertían en un verdadero dolor de cabeza. Parece que el equipo de Vue escuchó nuestras oraciones y lanzó Pinia. Esta no es solo otra biblioteca de gestión de estado, sino el sucesor oficial de Vuex que hace la vida del desarrollador frontend significativamente mejor.

Por cierto, el nombre es un juego de palabras divertido. Pinia suena como la palabra española «piña». Los creadores comparan una tienda con una piña: es un grupo de flores individuales que juntas forman una sola fruta. Cada tienda en tu aplicación nace por su cuenta, pero al final trabajan como un solo equipo.

Qué es y por qué lo necesitas

En resumen, Pinia es una tienda ligera para Vue que soporta completamente la Composition API. Pesa solo alrededor de 1 KB, soporta hot module reloading y se lleva bien con DevTools.

La principal diferencia con el enfoque anterior es la ausencia de mutaciones. Ahora puedes cambiar el estado directamente en las acciones, lo que reduce significativamente la cantidad de código repetitivo. Si estás trabajando con Vue 3, Pinia es el estándar de facto. Para quienes todavía están en Vue 2, hay compatibilidad hacia atrás, así que la migración no será un desastre.

Por qué los desarrolladores eligen esta tienda

He identificado varios puntos que realmente cambian el flujo de trabajo.

Soporte para TypeScript desde el primer momento

En Vuex, escribir tipos a menudo se sentía como usar muletas. En Pinia, todo es diferente. Está escrito en TypeScript, así que la autocompletación funciona perfectamente. No necesitas describir manualmente interfaces para cada getter o acción — la biblioteca deduce lo que estás devolviendo por sí sola.

Modularidad sin complejidad adicional

Olvídate de los módulos anidados y las rutas complejas hacia ellos. En Pinia, simplemente creas diferentes tiendas en diferentes archivos y las importas donde las necesitas. Esto hace que la arquitectura sea más limpia: cada componente toma solo los datos que realmente necesita.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Integración simple

Puedes conectar la biblioteca con solo un par de líneas de código. Es agradable que funcione muy bien con Nuxt y soporte renderizado del lado del servidor (SSR).

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

Cómo funciona en la práctica

Imagina que tienes un carrito de compras en una tienda en línea. Antes, tendrías que registrar un módulo, mantener el seguimiento de la nomenclatura de rutas y escribir acciones que llamaran a mutaciones. Con Pinia, simplemente llamas al método del store en un componente como una función regular.

Para recuperar datos sin perder reactividad, hay un práctico helper storeToRefs. Esto te salva cuando necesitas desestructurar un store sin romper su conexión con el estado.

import { useCartStore } from '@/stores/cart'
import { storeToRefs } from 'pinia'

const cart = useCartStore()
const { items, total } = storeToRefs(cart)

¿Vale la pena cambiar?

Si estás comenzando un nuevo proyecto en Vue 3, prácticamente no hay alternativas a Pinia. Es más simple, más rápido y más moderno. Si tienes un proyecto antiguo en Vuex, no hay necesidad de apresurarse, pero para nuevas funcionalidades recomendaría probar este enfoque.

El proyecto es mantenido activamente por Eduardo San Martin Morote (posva), quien es parte del equipo central de Vue. Esto da confianza de que la biblioteca no desaparecerá en un mes. Además, Pinia tiene excelente documentación y una comunidad activa.

Puedes probar el proyecto en acción en StackBlitz:

• Demo con Vue 3
• Demo con Nuxt 3

Para quién es definitivamente:

1. Quienes están cansados de la verbosidad de Vuex.
2. Fanáticos de TypeScript que aprecian la autocompletación de calidad.
3. Desarrolladores de Nuxt 3, donde Pinia es la solución recomendada.

Quizás el único inconveniente — si estás acostumbrado a la estructura rígida de Vuex con mutaciones obligatorias, la libertad de Pinia puede parecer extraña al principio. Pero uno se acostumbra rápidamente a las cosas buenas.