Começando

No centro de cada aplicação Vuex existe o store. Um "store" é basicamente um recipiente que contém o estado da sua aplicação. Há duas coisas que tornam um store Vuex diferente de um objeto global simples:

  1. Os stores Vuex são reativos. Quando os componentes do Vue obtêm o estado dele, eles atualizarão de forma reativa e eficiente se o estado do store mudar.

  2. Você não pode alterar diretamente os estados do store. A única maneira de mudar o estado de um store é explicitamente confirmando (ou fazendo commit de) mutações. Isso garante que cada mudança de estado deixe um registro rastreável, e permite ferramentas que nos ajudem a entender melhor nossas aplicações.

O Store Mais Simples

NOTA

Vamos usar a sintaxe ES2015 para exemplos de código para o resto da documentação. Se você ainda não aprendeu como usá-la, veja aqui!

Após instalar o Vuex, vamos criar um store. É bem simples - basta fornecer um objeto de estado inicial, e algumas mutações:

// Certifique-se de chamar Vue.use(Vuex) primeiro se estiver usando o sistema de módulos

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

Agora, você pode acessar o objeto de estado como store.state e acionar uma mudança de estado com o método store.commit:

store.commit('increment')

console.log(store.state.count) // -> 1

Novamente, a razão pela qual estamos confirmando (ou fazendo commit de) uma mutação em vez de mudar store.state.count diretamente, é porque queremos rastreá-la explicitamente. Esta convenção simples torna sua intenção mais explícita, de modo que você possa ter melhores argumetos sobre as mudanças de estado em seu aplicativo ao ler o código. Além disso, isso nos dá a oportunidade de implementar ferramentas que podem registrar cada mutação, capturar momentos do estado ou mesmo realizar depuração viajando pelo histórico de estado (time travel).

Usar o estado do store em um componente simplesmente envolve o retorno do estado dentro de um dado computado, porque o estado do store é reativo. Acionar alterações simplesmente significa confirmar (ou fazer commit de) mutações nos métodos dos componentes.

Aqui está um exemplo do aplicativo de contador do Vuex mais básico.

Em seguida, discutiremos cada conceito chave em mais detalhes, começando com Estado.