O que é Vuex? #

O Vuex é um padrão de gerenciamento de estado + biblioteca para aplicações Vue.js. Ele serve como um store centralizado para todos os componentes em uma aplicação, com regras garantindo que o estado só possa ser mutado de forma previsível.

O que é um "Padrão de Gerenciamento do Estado"? #

Vamos começar com uma aplicação simples em Vue, um contador:

const Counter = {
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
}

createApp(Counter).mount('#app')

É uma aplicação independente com as seguintes partes:

• O estado (state), que é a fonte da verdade que direciona nossa aplicação;
• A view, que é apenas um mapeamento declarativo do estado;
• As ações (actions), que são as possíveis maneiras pelas quais o estado pode mudar em reação às interações dos usuários da view.

Esta é uma representação simples do conceito de "fluxo de dados unidirecional" (one-way):

No entanto, a simplicidade é rapidamente descartada quando temos vários componentes que compartilham um estado comum:

• Múltiplas views que podem depender do mesmo pedaço de estado.
• Ações de diferentes views que podem precisar alterar o mesmo pedaço de estado.

Para o problema um, passar tudo via propriedades (props) pode ser entediante para componentes profundamente aninhados e simplesmente não funciona para componentes irmãos. Para o problema dois, muitas vezes nos encontramos recorrendo a soluções como buscar referências diretas de instância pai / filho ou tentar mudar e sincronizar várias cópias do estado por meio de eventos. Ambos os padrões são frágeis e levam rapidamente a códigos impossíveis de manter.

Então, por que não extraímos o estado compartilhado dos componentes, e o gerenciamos em um singleton global? Com isso, nossa árvore de componentes se torna uma grande "view", e qualquer componente pode acessar o estado ou acionar ações, não importando onde elas estejam na árvore!

Além disso, ao definir e separar os conceitos envolvidos no gerenciamento do estado e aplicar regras que mantêm a independência entre as views e os estados, damos ao nosso código mais estrutura e capacidade de manutenção.

Esta é a ideia básica por trás do Vuex, inspirado no Flux, Redux e The Elm Architecture. Ao contrário dos outros padrões, o Vuex também é uma implementação da biblioteca adaptada especificamente para o Vue.js aproveitar as vantagens de seu sistema de reatividade granular para atualizações eficientes.

Se você quiser aprender Vuex de uma forma interativa, você pode conferir esse curso de Vuex no Scrimba, que oferece uma mistura de screencast e playground de código em que você pode pausar e brincar com o código a qualquer momento.

Quando usar o Vuex? #

Embora o Vuex nos ajude a lidar com o gerenciamento de estado compartilhado, ele também vem com o custo de mais conceitos e códigos repetitivos. É uma escolha de prós e contras entre produtividade de curto e longo prazo

Se você nunca construiu um SPA em grande escala e for direto para o Vuex, ele pode parecer verboso e desanimador. Isso é perfeitamente normal - se a sua aplicação é simples, você provavelmente ficará bem sem o Vuex. Um simples store pattern pode ser tudo que você precisa. Mas, se você está criando um SPA de médio a grande porte, é provável que tenha encontrado situações que fazem você pensar em como lidar melhor com o estado fora de seus componentes Vue, e o Vuex será naturalmente o próximo passo para você. Há uma boa citação de Dan Abramov, o autor do Redux:

As bibliotecas Flux são como óculos: você saberá quando precisar delas.