Guia de Vuex

🎯 O guia para alavancar a sua carreira

Vuex é a biblioteca oficial de gerenciamento de estado do Vue.js: um "cofre" central onde os componentes leem e alteram dados de forma previsível, com mutations, actions e getters. Desde 2022 o próprio time do Vue recomenda Pinia como padrão para projetos novos — Vuex 3/4 segue mantido, mas sem novas funcionalidades. Este guia cobre os dois: os fundamentos de Vuex para quem mantém ou estuda projetos legados, e Pinia (a store oficial para Vue 3) para quem está começando hoje, com trilha de migração, cursos, ferramentas, comunidades e um capítulo de IA na prática.

_{Siga nas redes sociais para acompanhar mais conteúdos:}

⚠️ Aviso importante

Antes de tudo você pode me ajudar e colaborar, deu bastante trabalho fazer esse repositório e organizar para fazer seu estudo ou trabalho melhor, portanto você pode me ajudar das seguintes maneiras:

• Me siga no Github
• Acesse as redes sociais do Guia Dev Brasil
• Mande feedbacks no LinkedIn

💡 Nossa proposta

A proposta deste guia é dar uma ideia sobre o atual panorama e guiá-lo se você estiver confuso sobre qual será o seu próximo aprendizado, sem influenciar você a seguir os 'hypes' e 'trends' do momento. Acreditamos que com um maior conhecimento das diferentes estruturas e soluções disponíveis poderá escolher a ferramenta que melhor se aplica às suas demandas. E lembre-se, 'hypes' e 'trends' nem sempre são as melhores opções.

🔰 Para quem está começando agora

Não se assuste com a quantidade de conteúdo apresentado neste guia. Acredito que quem está começando pode usá-lo não como um objetivo, mas como um apoio para os estudos. Neste momento, dê enfoque no que te dá produtividade e o restante marque como Ver depois. Ao passo que seu conhecimento se torna mais amplo, a tendência é este guia fazer mais sentido e ficar fácil de ser assimilado. Bons estudos e entre em contato sempre que quiser! 👊

🚨 Colabore

• Abra Pull Requests com atualizações
• Discuta ideias em Issues
• Compartilhe o repositório com a sua comunidade

🌍 Tradução

Se você deseja acompanhar esse repositório em outro idioma que não seja o Português Brasileiro, você pode optar pelas escolhas de idiomas abaixo, você também pode colaborar com a tradução para outros idiomas e a correções de possíveis erros ortográficos, a comunidade agradece.

・English — Click Here
・Spanish — Click Here
・Chinese — Click Here
・Hindi — Click Here
・Arabic — Click Here
・French — Click Here
・Italian — Click Here
・Korean — Click Here
・Russian — Click Here
・German — Click Here
・Japanese — Click Here

📚 ÍNDICE

🗺️ Roadmap
📖 Documentação oficial
📰 Sites, blogs e comparativos
🔤 Sites e cursos para aprender Vuex e Pinia
📚 Livros
🎥 Canais no Youtube
🎙️ Podcasts
🛠️ Ferramentas
🧪 Projetos práticos e desafios
🤖 IA na prática
💼 Carreira e vagas
👥 Comunidades
🎓 Certificações

🗺️ Roadmap

• roadmap.sh — Frontend Roadmap — Roadmap visual da comunidade; gerenciamento de estado (Vuex/Pinia) aparece como etapa depois dos fundamentos de Vue.
• roadmap.sh — Vue Roadmap (dentro do roadmap de frameworks) — Passo a passo da comunidade para aprender Vue.js, incluindo onde Vuex e Pinia entram na trilha.
• Vuex 5 RFC — A proposta que nunca virou Vuex 5: o time decidiu seguir com Pinia, que tem a mesma API descrita aqui. Bom para entender o "porquê" da mudança.

📖 Documentação oficial

Vuex

• Vuex — What is Vuex? — Página inicial oficial, já com o aviso "Pinia is now the new default" explicando a situação atual da biblioteca.
• Vuex — Guia (Getting Started) — Primeiros passos oficiais: store, state e o ciclo básico.
• Vuex — State — Como declarar e acessar o estado centralizado da aplicação.
• Vuex — Mutations — A única forma permitida de alterar o state: síncrona e rastreável.
• Vuex — Actions — Lógica assíncrona (chamadas de API) que dispara mutations.
• Vuex — Modules — Como dividir a store em módulos para aplicações grandes.
• Vuex — Application Structure — Organização de pastas recomendada para projetos Vuex de porte médio/grande.
• Vuex — Plugins — Como interceptar mutations para logging, persistência etc.
• Vuex — Strict Mode — Modo que barra alterações de state fora de mutations, útil em desenvolvimento.
• Vuex — Form Handling — Padrões para formulários com v-model ligados a uma store.
• Vuex — Testing — Como testar mutations, actions e getters isoladamente.
• Vuex — Hot Reloading — Recarregamento de mutations/módulos sem perder o state durante o desenvolvimento.
• Vuex — TypeScript Support — Limitações e formas de tipar uma store Vuex.
• Vuex — Composition API — Como usar useStore() dentro do setup().
• Vuex — Migrando para 4.0 a partir do 3.x — Guia oficial de migração de Vuex 3 (Vue 2) para Vuex 4 (Vue 3).
• Vuex — Documentação em Português — Tradução oficial (parcial) da documentação para PT-BR.
• Repositório oficial do Vuex (GitHub) — Código-fonte, issues e releases.
• Vuex CheatSheet — Referência interativa com toda a API do Vuex em uma página.

Pinia

• Pinia — Introduction — Por que Pinia existe e por que substituiu Vuex como padrão oficial.
• Pinia — Getting Started — Instalação e criação da primeira store.
• Pinia — Core Concepts — Visão geral de state, getters, actions e plugins.
• Pinia — State — Como declarar o estado reativo de uma store.
• Pinia — Getters — Equivalente aos computed das stores; cacheados e reativos.
• Pinia — Actions — Métodos síncronos ou assíncronos que alteram o state (sem mutations separadas).
• Pinia — Plugins — Como estender todas as stores (persistência, undo/redo, etc.).
• Pinia — SSR — Uso de Pinia em Server-Side Rendering, base do suporte no Nuxt.
• Pinia — Guia de migração do Vuex — Passo a passo oficial para sair de Vuex e chegar em Pinia.
• Pinia — Composing Stores — Como uma store usa outra store dentro dela.
• Pinia — Testing — Como mockar e testar stores com @pinia/testing.
• Pinia — Using with the Options API — Como usar Pinia em projetos que ainda usam Options API.
• Pinia — Hot Module Replacement — Configuração de HMR para stores durante o desenvolvimento.
• Pinia — API Reference — Referência completa de tipos e funções.
• Repositório oficial do Pinia (GitHub) — Código-fonte, issues, discussões e releases.
• Módulo oficial do Pinia para Nuxt — Integração pronta: Nuxt já usa Pinia como gerenciador de estado padrão.

Vue.js (contexto)

• Vue.js — Documentação oficial — Ponto de partida: Vuex e Pinia só fazem sentido depois dos fundamentos de Vue.
• Vue.js — State Management — Página oficial que explica quando usar um reactive() simples, provide/inject ou uma biblioteca como Pinia.
• Vue.js — Provide / Inject — Alternativa nativa e mais simples ao Vuex/Pinia para compartilhar estado entre componentes profundamente aninhados.
• Vue.js — Composables — Padrão de estado compartilhado com Composition API, sem biblioteca externa.
• Vue.js — TypeScript com a Composition API — Como tipar ref, reactive e stores.
• The Vue Point — Vue 2 is Approaching End of Life — Post oficial confirmando o fim do suporte ao Vue 2 (e, por consequência, ao Vuex 3).
• The Vue Point — Vue 3 as the New Default — Anúncio oficial de que Vue 3 (e o ecossistema Pinia) virou o padrão.
• Vue.js News — Newsletter/portal oficial com anúncios do ecossistema Vue, incluindo Pinia.

📰 Sites, blogs e comparativos

• VueDose — Tips & tricks do ecossistema Vue — Dicas curtas e objetivas sobre Vue, Pinia e Composition API.
• Weekly Vue News — Newsletter semanal com as novidades de Vue, Nuxt e do ecossistema (inclui Pinia).
• Pinia vs Vuex (Vue Mastery Blog) — Comparação direta entre as duas bibliotecas, por que migrar e quando manter Vuex.
• Pinia vs Vuex (Michael Thiessen) — Comparativo técnico escrito pelo autor do curso Mastering Pinia.
• State Management with the Composition API (Vue School) — Artigo mostrando as opções de gerenciamento de estado antes de decidir por Pinia/Vuex.
• How to Structure a Large Scale Vue Application (Vue School) — Organização de pastas e stores em projetos Vue de grande porte.
• DEV Community — tag Vue — Artigos da comunidade sobre Vue, Vuex e Pinia, atualizados com frequência.

🔤 Sites e cursos para aprender Vuex e Pinia

Cursos para aprender Vuex e Pinia em Português

• Vue.js: criando interfaces reativas (Alura) — Curso pago da Alura sobre os fundamentos de Vue.js, base necessária antes de Vuex/Pinia.
• Cursos de Vue.js (Alura) — Catálogo de formações da Alura na trilha de Vue.js. Cursos pagos.
• DIO — trilhas e cursos gratuitos — Plataforma brasileira com cursos gratuitos de front-end, incluindo Vue.js, com certificado.
• Origamid — Escola brasileira de front-end com cursos sobre JavaScript moderno e frameworks, incluindo Vue. Cursos pagos.
• Rocketseat — Uma das maiores plataformas de ensino de programação do Brasil, com formações e eventos gratuitos de front-end.

Cursos para aprender Vuex e Pinia em Inglês

• Vuex for Everyone (Vue School) — Curso dedicado inteiramente a Vuex, do zero até módulos e testes.
• Pinia: The Enjoyable Vue Store (Vue School) — Curso focado em Pinia: state, getters, actions e plugins na prática.
• Vue.js Fundamentals (Vue School) — Base de Vue.js necessária antes de entrar em Vuex/Pinia.
• Intro to Vue 3 (Vue Mastery) — Curso introdutório gratuito de Vue 3 pela Vue Mastery.
• Mastering Pinia (Vue Mastery) — Curso completo sobre Pinia direto na plataforma da Vue Mastery. Curso pago.
• Mastering Pinia (Michael Thiessen) — Curso independente e aprofundado sobre Pinia, do mesmo autor do comparativo Pinia vs Vuex. Curso pago.

📚 Livros

• Vue.js in Action (Erik Hanchett e Benjamin Listwon, Manning) — Livro introdutório de Vue.js com capítulo dedicado a Vuex. Livro pago.
• Testing Vue.js Applications (Edd Yerburgh, Manning) — Livro focado em testes de componentes Vue e de stores Vuex. Livro pago.
• Front-end com Vue.js (Leonardo Vilarinho, Casa do Código) — Livro brasileiro sobre Vue.js, incluindo gerenciamento de estado. Livro pago.
• The Majesty of Vue.js 2 (Alex Kyriakidis e Kostas Maniatis, Leanpub) — Um dos primeiros livros de Vue.js em profundidade, com capítulo sobre Vuex. Livro pago.
• Vue - The Road To Enterprise (Thomas Findlay) — Livro sobre arquitetura de aplicações Vue em escala, incluindo decisões de gerenciamento de estado. Livro pago.

🎥 Canais no Youtube

Em português

• Full Cycle — Arquitetura de software e Clean Architecture aplicadas a projetos reais, incluindo Vue.js.
• Código Fonte TV — Notícias, comparativos e conceitos de front-end explicados de forma acessível, cobrindo Vue.js.
• DevDojo Brasil — Série "Aprendendo Junto" com conteúdo de Vue.js passo a passo em português.

Em inglês

• Vue School — Canal oficial da Vue School, com aulas gratuitas de Vue, Vuex e Pinia.
• Vue Mastery — Canal oficial da Vue Mastery, parceira do time core do Vue.js.
• VueDojo — Canal dedicado a tutoriais de Vue.js, Nuxt e ecossistema.
• Program With Erik — Tutoriais focados em Vue.js e Nuxt, incluindo Pinia na prática.
• The Net Ninja — Playlists completas de Vue.js, incluindo módulos clássicos de Vuex.
• Traversy Media — Crash courses de várias tecnologias web, incluindo Vue.js.
• Web Dev Simplified — Tutoriais claros sobre JavaScript e frameworks, incluindo Vue.
• Fireship — Vídeos curtos e diretos explicando conceitos como Vuex e Pinia em minutos.

🎙️ Podcasts

• DejaVue — The Vue podcast to remember — Podcast dedicado ao ecossistema Vue.js, com episódios sobre Pinia e gerenciamento de estado.
• Enjoy the Vue — Podcast sobre Vue.js e front-end em geral, com discussões sobre arquitetura de stores.

🛠️ Ferramentas

Ecossistema Pinia

• Pinia Colada — Camada de data fetching para Pinia (cache, revalidação), criada pelo mesmo autor do Pinia. Lançado em 2024.
• Repositório do Pinia Colada (GitHub) — Código-fonte do Pinia Colada.
• pinia-plugin-persistedstate — Persiste o state de uma store no localStorage/sessionStorage automaticamente.
• pinia-plugin-persistedstate-2 — Alternativa mais configurável para persistência de state do Pinia.
• Pinia ORM — Camada de Object-Relational Mapping sobre o Pinia, para modelar dados como entidades.
• Documentação do Pinia ORM — Guia oficial do plugin, com exemplos de modelos e relacionamentos.
• @pinia/testing — Utilitário oficial para mockar stores Pinia em testes.
• @pinia/nuxt — Módulo oficial que integra Pinia ao Nuxt automaticamente.

Scaffolding, DevTools e build

• create-vue — Ferramenta oficial de scaffolding: já oferece a opção de incluir Pinia num projeto novo.
• Vue DevTools — Extensão oficial de navegador para depurar componentes, eventos e stores (Vuex e Pinia) em tempo real.
• Repositório do Vue DevTools (GitHub) — Código-fonte da extensão oficial.
• Vite — Ferramenta de build padrão do ecossistema Vue moderno, usada por praticamente todo projeto com Pinia.
• Perfil de Eduardo San Martin Morote (posva) no GitHub — Criador do Pinia e membro do core team do Vue.js; acompanhe para novidades em primeira mão.

🧪 Projetos práticos e desafios

• Exemplos oficiais do Vuex — Aplicações de exemplo mantidas no próprio repositório do Vuex (carrinho de compras, TodoMVC, chat).
• vue-vuex-todomvc — TodoMVC completo com Vuex, back-end REST e testes end-to-end com Cypress.
• Vitesse — Starter opinativo de Vue 3 com Pinia, TypeScript, PWA e Composition API prontos para uso.
• Vitesse Lite — Versão enxuta do Vitesse, boa para estudar a estrutura de um projeto Pinia do zero.
• RealWorld — O mesmo app ("Medium clone") implementado em dezenas de stacks; ótimo para comparar Vuex/Pinia com outras soluções de estado.
• Vue.js Examples — Diretório de projetos e componentes open source feitos com Vue.js.

🤖 IA na prática

Vuex e Pinia são bibliotecas pequenas e bem documentadas — exatamente o tipo de código onde um assistente de IA rende bem, desde que você valide contra a documentação oficial (a IA ainda confunde a sintaxe das duas).

Para aprender

• Peça para a IA reescrever uma store Vuex (state/mutations/actions/getters) como uma store Pinia equivalente e compare com o guia oficial de migração — é o exercício mais direto para internalizar as diferenças.
• Cole um trecho de store e peça: "essa lógica deveria estar numa getter, numa action ou num composable? explique o porquê".
• Peça exemplos comentados de Options Store vs Setup Store no Pinia e quando cada estilo faz mais sentido.
• Peça para explicar um erro comum do Vuex (ex.: mutar o state fora de uma mutation) e mostrar o mesmo erro (ou a ausência dele) em Pinia.

Para trabalhar

• Use GitHub Copilot, Cursor ou Claude Code para gerar o boilerplate repetitivo de uma store nova (state tipado, getters, actions) a partir da descrição do domínio.
• Peça para a IA gerar testes de store (com @pinia/testing ou o utilitário de testes do Vuex) cobrindo os principais fluxos de actions.
• Ao migrar um projeto grande, peça para a IA mapear todos os módulos Vuex de um diretório e sugerir a divisão em stores Pinia — depois revise módulo a módulo, sem aceitar migrações em massa sem checar.

Limites e boas práticas

• IA mistura sintaxe de Vuex 3, Vuex 4 e Pinia com frequência (são APIs parecidas, mas não iguais). Sempre confirme contra a documentação do Pinia ou do Vuex.
• Ela tende a sugerir mapState/mapActions (padrão Options API) mesmo em projetos que usam Composition API. Peça explicitamente o estilo que seu projeto usa.
• Não cole tokens, chaves de API ou dados de usuários reais que estejam guardados na store em ferramentas de IA sem checar a política da sua empresa.
• Entenda a store antes de aceitar: em produção, um bug de state mal migrado afeta a aplicação inteira.

Bibliotecas de IA no ecossistema Vue

• Vercel AI SDK — SDK com suporte a Vue/Nuxt para construir interfaces com streaming de respostas de LLMs, frequentemente combinado com Pinia para guardar o histórico de conversa.
• Anthropic TypeScript SDK — SDK oficial para usar os modelos Claude a partir de uma aplicação Vue/Nuxt.
• Claude Code — Agente de código no terminal, útil para migrações grandes de Vuex para Pinia.

💼 Carreira e vagas

• VueJobs — Portal de vagas dedicado ao ecossistema Vue.js.
• Stack Overflow Developer Survey 2025 — Panorama anual de linguagens, frameworks e salários, com recorte de Vue.js.
• State of JavaScript 2024 — Pesquisa anual sobre o ecossistema JS, incluindo adoção de Vue e suas bibliotecas de estado.
• State of Vue Report (Monterail) — Pesquisa dedicada ao ecossistema Vue.js, com dados sobre adoção de Vuex vs Pinia.
• Programathor — Vagas de tecnologia no Brasil.
• GeekHunter — Plataforma brasileira onde empresas fazem propostas a devs.
• Coodesh — Vagas tech no Brasil com processos seletivos padronizados.
• Remotar — Vagas 100% remotas para brasileiros.
• frontendbr/vagas — Vagas de front-end publicadas como issues no GitHub.
• RemoteOK — vagas de Vue.js — Vagas remotas internacionais filtradas por Vue.js.

👥 Comunidades

• Chat oficial do Vue.js (Vue Land, Discord) — Link oficial mantido pelo time do Vue.js para o Discord da comunidade, com canais de ajuda sobre Vuex e Pinia.
• Vue.js Discussions (GitHub) — O antigo fórum oficial migrou para o GitHub Discussions; é onde o core team responde dúvidas hoje.
• VueJS Brasil (Telegram) — Grupo brasileiro de discussão sobre Vue.js.
• r/vuejs — Subreddit da comunidade Vue.js.
• DEV Community — tag Vue — Artigos e discussões da comunidade sobre Vue, Vuex e Pinia.
• TabNews — Comunidade brasileira de conteúdo técnico, com discussões sobre front-end e Vue.js.
• He4rt Developers — Comunidade brasileira open source com Discord ativo e projetos em diversas stacks, incluindo Vue.

🎓 Certificações

Não existe certificação oficial de Vuex ou Pinia — nem da equipe que mantém o Vue.js. Empregadores avaliam projetos publicados e domínio prático de gerenciamento de estado. Os cursos abaixo emitem certificado de conclusão, que ajuda no currículo mas não substitui portfólio.

• DIO — cursos com certificado — Plataforma brasileira gratuita que emite certificado de conclusão em trilhas de front-end/Vue.js.
• Cursa — Plataforma brasileira com cursos gratuitos e certificado digital.