Guia Completo de Vue com Vuex: Gerenciamento de Estado em Projetos Pequenos

Se você já trabalhou com Vue.js, sabe que a reatividade é um dos seus pontos fortes.

Mas à medida que o projeto cresce, gerenciar estados compartilhados entre múltiplos componentes pode virar um caos.

E é aí que entra o Vuex!

O Vuex é a solução oficial para gerenciamento de estado no Vue.js, e apesar de ser mais conhecido por sua aplicação em grandes projetos, ele pode ser extremamente útil também em projetos pequenos.

Neste guia completo, você vai entender como usar Vue com Vuex: Gerenciamento de Estado de forma eficiente, simplificando sua aplicação sem adicionar complexidade desnecessária.

Se você quer organizar melhor seu código, reduzir a repetição de estados e tornar sua aplicação mais previsível, continue lendo!

O que é Vuex e por que usá-lo?

O Vuex é um padrão de gerenciamento de estado centralizado para aplicações Vue.js.

Ele funciona como um armazenamento global, permitindo que diferentes componentes compartilhem estados sem precisar passar props de pai para filho ou depender de eventos para comunicação.

Mesmo em projetos pequenos, o Vuex pode trazer vantagens como:

✅ Código mais organizado: Evita a “bagunça” de estados distribuídos em vários componentes.
✅ Facilidade na depuração: Com o Vue Devtools, é possível visualizar o estado global e suas mutações em tempo real.
✅ Menos acoplamento entre componentes: Qualquer parte da aplicação pode acessar os estados centralizados sem precisar de intermediação.

Mas calma! Vuex não é a única solução. Em projetos realmente mínimos, provide/inject ou composables podem ser alternativas mais leves.

Mas se sua aplicação tem múltiplos componentes que precisam compartilhar estados, o Vuex pode ser a melhor opção.

Instalando e Configurando o Vue com Vuex: Gerenciamento de Estado

Antes de começarmos a usar o Vuex, precisamos instalá-lo no nosso projeto Vue.js.

1️⃣ Instalando o Vue com Vuex

Se você estiver usando Vue 2, pode instalar o Vuex com o seguinte comando:

npm install vuex --save

Já no Vue 3, o Vuex ainda pode ser utilizado, mas é recomendável considerar o Pinia, que é a nova solução oficial.

Se quiser continuar com Vuex no Vue 3, instale com:

npm install vuex@next --save

Agora, vamos configurar o Vuex no nosso projeto.

🛠️ Criando a Store do Vuex: Vue com Vuex

O Vuex funciona através de uma store centralizada, onde armazenamos e manipulamos os estados globais.

2️⃣ Criando e configurando a store

Dentro da pasta src, crie um diretório chamado store e adicione um arquivo chamado index.js:

import { createStore } from 'vuex';

export default createStore({
  state: {
    contador: 0
  },
  mutations: {
    incrementar(state) {
      state.contador++;
    }
  },
  actions: {
    incrementarAsync({ commit }) {
      setTimeout(() => {
        commit('incrementar');
      }, 1000);
    }
  },
  getters: {
    contadorDobrado: (state) => state.contador * 2
  }
});

Entendendo os Conceitos do Vuex: Vue com Vuex

Agora que criamos nossa store, vamos entender melhor os principais conceitos do Vuex:

💡 Como Usar a Store no Projeto

Agora, precisamos integrar essa store ao nosso Vue.

3️⃣ Importando a Store no Vue

No main.js, importe e configure a store:

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

Agora, podemos acessar o Vuex em qualquer componente!

Usando o Vuex nos Componentes

Vamos ver como utilizar o Vuex dentro de um componente Vue.

4️⃣ Acessando o State

Para acessar o estado global no Vuex dentro de um componente, usamos mapState:

<template>
  <div>
    <h1>Contador: {{ contador }}</h1>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['contador'])
  }
};
</script>

5️⃣ Modificando o Estado com Mutations

Para alterar um estado, chamamos as mutations com this.$store.commit():

<template>
  <div>
    <h1>Contador: {{ contador }}</h1>
    <button @click="incrementar">Incrementar</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['contador'])
  },
  methods: {
    ...mapMutations(['incrementar'])
  }
};
</script>

6️⃣ Trabalhando com Actions (Assíncronas)

Se quisermos chamar uma ação assíncrona, usamos this.$store.dispatch():

<template>
  <div>
    <h1>Contador: {{ contador }}</h1>
    <button @click="incrementarAsync">Incrementar (Atraso)</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['contador'])
  },
  methods: {
    ...mapActions(['incrementarAsync'])
  }
};
</script>

🧐 Quando NÃO Usar Vuex?

Embora o Vuex seja poderoso, ele não é sempre necessário.

Para projetos extremamente pequenos, considere alternativas como:

• Props e eventos: Quando apenas um pai precisa passar dados para um filho.
• Provide/Inject: Quando há necessidade de compartilhar estados entre componentes sem Vuex.
• Composables (Vue 3): Funções reutilizáveis para armazenar estados sem precisar de Vuex.

Se seu projeto crescer ou precisar de um controle de estado global, aí sim o Vuex faz todo sentido!

Conclusão: Vue com Vuex Gerenciamento de Estado

Se você quer um código mais organizado e previsível, o Vuex é uma excelente ferramenta, mesmo para projetos pequenos.

Ele simplifica a gestão de estados e melhora a manutenção do código.

Agora que você já sabe o essencial, que tal implementar o Vuex no seu projeto e testar na prática?

Se gostou do conteúdo, compartilhe com quem está aprendendo Vue.js! Se tiver dúvidas, deixe nos comentários. 😉