Adeus Vuex, Olá Pinia

Lembra como tínhamos dificuldades com o Vuex? Mutações intermináveis, sintaxes complicadas de commit e dispatch, e tipos TypeScript que viravam uma verdadeira dor de cabeça. Parece que a equipe do Vue ouviu nossas preces e lançou o Pinia. Não é apenas mais uma biblioteca de gerenciamento de estado, mas o sucessor oficial do Vuex que torna a vida do desenvolvedor frontend significativamente melhor.

Aliás, o nome é um trocadilho interessante. Pinia soa como a palavra espanhola «piña» (abacaxi). Os criadores comparam uma store a um abacaxi: é um grupo de flores individuais que juntas formam uma única fruta. Cada store na sua aplicação nasce por conta própria, mas no final funcionam como uma equipe.

O Que É e Por Que Você Precisa Del

Em resumo, Pinia é uma store leve para Vue que suporta totalmente a Composition API. Pesa apenas cerca de 1 KB, suporta hot module reloading e funciona muito bem com DevTools.

A principal diferença da abordagem antiga é a ausência de mutations. Agora você pode mudar o state diretamente nas actions, o que reduz significativamente a quantidade de código boilerplate. Se você está trabalhando com Vue 3, Pinia é o padrão de fato. Para quem ainda está no Vue 2, há compatibilidade com versões anteriores, então a migração não será um desastre.

Por Que os Desenvolvedores Escolhem Esta Store

Identifiquei vários pontos que realmente mudam o fluxo de trabalho.

Suporte ao TypeScript Nativo

No Vuex, tipar frequentemente parecia usar muletas. No Pinia, tudo é diferente. É escrito em TypeScript, então o autocompletar funciona perfeitamente. Você não precisa descrever manualmente interfaces para cada getter ou action — a biblioteca descobre o que você está retornando sozinha.

Modularidade Sem Complexidade Extra

Esqueça os módulos aninhados e caminhos complexos para eles. No Pinia, você simplesmente cria diferentes stores em diferentes arquivos e importa onde precisa. Isso torna a arquitetura mais limpa: cada componente pega apenas os dados que realmente precisa.

import { defineStore } from 'pinia'

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

Integração Simples

Você pode conectar a biblioteca com apenas algumas linhas de código. É bom que funcione muito bem com Nuxt e suporte server-side rendering (SSR).

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

Como Funciona na Prática

Imagine que você tem um carrinho de compras em uma loja online. Antes, você precisava registrar um módulo, acompanhar a nomenclatura dos caminhos e escrever actions que chamam mutations. Com Pinia, você simplesmente chama o método da store em um componente como uma função comum.

Para recuperar dados sem perder a reatividade, existe um helper conveniente storeToRefs. Isso salva quando você precisa desestruturar uma store sem quebrar sua conexão com o state.

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

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

Vale a Pena Migrar

Se você está iniciando um novo projeto Vue 3, praticamente não há alternativas ao Pinia. É mais simples, mais rápido e mais moderno. Se você tem um projeto Vuex antigo, não há necessidade de pressa, mas para novos recursos eu recomendaria experimentar essa abordagem.

O projeto é ativamente mantido por Eduardo San Martin Morote (posva), que faz parte do time principal do Vue. Isso dá confiança de que a biblioteca não vai desaparecer em um mês. Além disso, o Pinia tem excelente documentação e uma comunidade ativa.

Você pode experimentar o projeto em ação no StackBlitz:

• Demo com Vue 3
• Demo com Nuxt 3

Para quem definitivamente é:

1. Quem está cansado da verbosidade do Vuex.
2. Fãs do TypeScript que valorizam autocompletar de qualidade.
3. Desenvolvedores de Nuxt 3, onde o Pinia é a solução recomendada.

Talvez a única desvantagem — se você está acostumado com a estrutura rígida do Vuex com mutations obrigatórias, a liberdade do Pinia pode parecer estranha no início. Mas a gente se acostuma com as coisas boas rapidamente.