Pinia: Una store para dominar todos los estados de tu aplicación Vue3

Introducción

¡Pinia o Piña es mucho más que una deliciosa fruta tropical; también es el nombre de una poderosa herramienta para el desarrollo web!

Desde hace un tiempo, tenemos la versión 3 de Vue entre nosotros, y esta nueva versión viene con algunos cambios. Antes, la instalación recomendada incluía Vetur, Vue CLI y Vuex, mientras que ahora son Volar, Vite y Pinia los recomendados.

¿Qué es?

Se trata de una biblioteca de gestión de estado que potencia el rendimiento y la eficiencia de tus aplicaciones. Imagina tener un estado global para tus componentes Vue sin sacrificar el rendimiento.

En este artículo, exploraremos qué es y en qué difiere con respecto a Vuex.

¿En qué se diferencia Pinia de Vuex?

Mutaciones

Básicamente hemos dejado atrás la era en la que modificar el estado implicaba la ejecución de acciones que, a su vez, llamaban a mutaciones. Esta transición marca un cambio significativo en nuestro enfoque hacia la gestión de estados y la implementación de cambios en nuestro sistema.

Un ejemplo de cómo es una store de Vuex, sería el siguiente:

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      items: []
    }      
  }, 
  actions: {
    addItem({ commit }, item) {
      commit('addNewItem', item)
    }
  }, 
  mutations: {
    addNewItem(state, item) {
      state.items.push(item)
    }
  }
})

Con Pinia queda algo más recogido y, a mi parecer, mucho más legible:

import { defineStore } from 'pinia'

Export const useCartStore = defineStore( 'cart', {
  state () => ({
    return {
      items: []
    }
  }),
  actions: {
    addItem(item) {
      this.items.push(item)
    }
  }
})

Diferentes stores

Mientras que en Vuex estamos limitados a una única store, aunque podemos crear módulos para modularizar la lógica, en Pinia podemos generar una cantidad ilimitada de stores de acuerdo a nuestras necesidades. Esto permite separar de manera más efectiva las responsabilidades y mantener un diseño limpio y organizado en proyectos de cualquier envergadura. Ya sean una, veinte o incluso más, las stores en Pinia pueden importarse y utilizarse en distintas partes del proyecto, otorgando un nivel adicional de modularidad y escalabilidad.

MapAction

Para poder llamar a un método de la store en Vuex necesitabas usar mapActions, que contenía un array de los métodos que fueses a usar de la store, algo un tanto engorroso.

<template›
  // … 
  <button @click="addItem('naranjas')">Naranjas</button>
</templete>

<script›
import { mapActions } from 'vuex'
 
  // … 
methods: {
  …mapActions([
    'addItem'
  ])
}
‹/script›

Por contra, en Pinia esta tarea es tan sencilla como emplear la store correspondiente y ejecutar la acción requerida. Con solo unos pocos pasos, puedes acceder al estado y las funcionalidades de la store, lo que simplifica la interacción con la gestión de datos en tus componentes Vue.

<template>
  // …
  <button @click="cart.addItem 'naranjas')"›Naranjas‹/button›
</template>

<script>
import { useCartStore } from './stores/cart'

// …
const cart = useCartStore()
</script›

Soporte Typescript

A diferencia de Vuex, Pinia ofrece un sólido soporte para TypeScript, lo que eleva nuestra capacidad para escribir un código más robusto y promueve la adopción de prácticas de desarrollo más sólidas y seguras. La integración fluida con TypeScript en Pinia agiliza la detección de errores y proporciona una documentación autogenerada que mejora la claridad en el desarrollo colaborativo.

Soporte de DevTools

Otra cosa interesante es que Pinia ya es soportada por las devtools de Vue por lo que es mucho más fácil ver qué tenemos en la store en cada momento mientras depuramos nuestro código.

Algo parecido a esto es lo que nos encontramos con las VueDevTools cuando queremos ver la store de Pinia.

Conclusión

¿Deberíamos optar por Pinia? La respuesta breve: sí, definitivamente. Sin embargo, la respuesta extendida está más matizada y depende del contexto. Si estás cómodo con Vuex y lo has incorporado exitosamente en tus proyectos, puede que sea preferible mantenerlo. No obstante, si estás comenzando un nuevo proyecto, mi recomendación es Pinia. Es más intuitivo y, en mi opinión, presenta numerosas ventajas sobre Vuex. Además, si ya estás familiarizado con Vuex, la transición a Pinia resultará sorprendentemente fluida y enriquecedora.

En resumen, es una biblioteca de gestión de estado que ha ganado rápidamente popularidad en la comunidad de desarrolladores Vue. Su enfoque en el rendimiento y la eficiencia ha resonado fuertemente, especialmente en proyectos de gran envergadura donde la gestión del estado es crítica.