Pinia é a biblioteca oficial de gerenciamento de estado do Vue (sucessora do Vuex) — uma store centralizada para estado que precisa ser compartilhado em muitos componentes, com uma API simples e type-safe construída na Composition API.
{ defineStore } ;
{ ref, computed } ;
useCounterStore = (, {
count = ();
double = ( count. * );
() { count.++; }
() { count. = api.(); }
{ count, double, increment, fetchInitial };
});
Esta "setup store" parece exatamente como um composable — ref para estado, computed para getters, funções para actions — tornando-a intuitiva se você conhece a Composition API.
<script setup>
import { useCounterStore } from "@/stores/counter";
import { storeToRefs } from "pinia";
const store = useCounterStore();
const { count, double } = storeToRefs(store); // keep state reactive when destructured
const { increment } = store; // actions can be destructured directly
</script>
<template>
<button @click="increment">{{ count }} (x2 = {{ double }})</button>
</template>
Importante: use storeToRefs ao desestruturar estado/getters — desestruturação simples quebraria a reatividade (mesmo cuidado reativo que reactive). Actions não precisam disso.
✓ No mutations boilerplate — actions can mutate state directly
✓ Excellent TypeScript inference (Vuex was painful to type)
✓ Modular by design — many small stores, no nested-module complexity
✓ Composition-API-native, tiny API, devtools support
props/emits → parent ↔ child
provide/inject → share within a subtree
Pinia store → GLOBAL/app-wide shared state (auth user, cart, settings)
accessed by many unrelated components
Pinia é a solução padrão para estado global e compartilhado em aplicações Vue — user/auth, carrinhos de compras, configurações de aplicativo, dados em cache — qualquer coisa que muitos componentes distantes precisem ler e atualizar consistentemente.
Sua API estilo composable, suporte TypeScript de primeira classe e falta do boilerplate do Vuex a tornam a escolha recomendada.
Saber quando recorrer a ela (vs props/inject) quando o estado é verdadeiramente global, e usar storeToRefs para preservar a reatividade na desestruturação, é o cerne de usá-la corretamente.