Pinia vs Vuex: por que mudar
Sem mutações, inferência de TypeScript, suporte ao DevTools, API mais simples e modularidade por padrão.
Pinia vs Vuex: por que mudar é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Por que o Pinia substituiu o Vuex
O Pinia é a biblioteca oficial de gerenciamento de estado para o Vue 3, recomendada em vez do Vuex. Ele mantém os bons recursos do Vuex, mas elimina o código repetitivo e as partes que entravam em conflito com o TypeScript.
Chega de mutações
O Vuex exigia mutations como a única forma de alterar o estado. O Pinia as elimina completamente — as ações alteram o estado diretamente. Menos formalidade, menos arquivos e o mesmo rastreamento pelas ferramentas de desenvolvimento.
// Vuex: state -> mutation -> action (3 steps)
// Pinia: action mutates state directly (1 step)
actions: {
increment() {
this.count++ // direct, no commit needed
}
}Inferência de TypeScript pronta para uso
No Vuex, definir os tipos do repositório era trabalhoso e exigia adaptadores complexos. O Pinia infere os tipos automaticamente a partir de seu state, getters e actions — sem uma camada adicional de tipagem.
const store = useCounterStore()
store.count // inferred as number
store.doubled // inferred from getter
store.increment() // fully typed actionModular por definição
O Vuex usava um único repositório com modules aninhados e problemas de definição de espaços de nomes. O Pinia é modular por natureza: um arquivo por repositório, cada um criado com seu próprio defineStore. Não há registro central.
// stores/counter.js
export const useCounterStore = defineStore(...)
// stores/user.js
export const useUserStore = defineStore(...)Não é necessário definir espaços de nomes
Como cada repositório é independente e importado onde é usado, não há um espaço de nomes global para gerenciar. Basta importar o repositório desejado e chamá-lo como uma função.
import { useUserStore } from '@/stores/user'
const user = useUserStore()Suporte às ferramentas de desenvolvimento
O Pinia integra-se às ferramentas de desenvolvimento do Vue assim como o Vuex fazia. Você obtém uma linha do tempo de ações, inspeção do estado e depuração com viagem no tempo — sem escrever mutações.
Pacote menor
O Pinia é aproximadamente 1 KB menor que o Vuex e compatível com a eliminação de código não utilizado. Os repositórios que você nunca importa não são incluídos no pacote final.
API mais simples
Não há código repetitivo de mapState, mapGetters e mapActions. Você chama a composição do repositório dentro de setup e usa diretamente o objeto retornado.
const counter = useCounterStore()
// access state, getters, and actions on one objectFunciona com as duas APIs
O Pinia oferece suporte à API de Opções e à API de Composição. Os dois estilos para escrever um repositório são o repositório de opções (objeto) e o repositório de configuração (função), abordados mais adiante neste curso.
Instalando o Pinia
Adicione o Pinia ao seu app criando a instância e registrando-a como um plug-in. A partir daí, qualquer componente pode usar qualquer repositório.
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(createPinia()).mount('#app')Quando usar o Pinia
Use o Pinia quando o estado precisar ser compartilhado entre muitos componentes, sobreviver a mudanças de rota ou ser inspecionado nas ferramentas de desenvolvimento. Para o estado local de um único componente, um simples ref ainda é mais simples.
Verificação rápida
Teste sua compreensão sobre por que o Pinia substituiu o Vuex.
Recapitulação
O Pinia é a escolha moderna para o estado no Vue 3:
- Sem mutações — as ações alteram o estado diretamente.
- Inferência automática de tipos do TypeScript, sem adaptadores.
- Modular: um repositório por arquivo, sem definição de espaços de nomes.
- Suporte completo às ferramentas de desenvolvimento e um pacote aproximadamente 1 KB menor.
Perguntas Frequentes
A aula “Pinia vs Vuex: por que mudar” é grátis?
Sim — o texto completo de “Pinia vs Vuex: por que mudar” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Pinia vs Vuex: por que mudar”?
Sem mutações, inferência de TypeScript, suporte ao DevTools, API mais simples e modularidade por padrão. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Pinia vs Vuex: por que mudar”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Pinia vs Vuex: por que mudar
- defineStore: estado, getters e ações
- Composição de stores e acesso entre stores
- Persistência do Pinia e DevTools