Começando #

No centro de cada aplicação Vuex existe o store. Um "store" é basicamente um contêiner que manté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.

Um Store Bem Simples #

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

import { createApp } from 'vue'
import { createStore } from 'vuex'

// Cria uma nova instância do store.
const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})

const app = createApp({ /* seu componente raiz */ })

// Instale a instância do store como um plugin
app.use(store)

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

Em um componente Vue, você pode acessar o store como this.$store. Agora podemos confirmar (ou fazer commit de) uma mutação usando um método de componente:

methods: {
  increment() {
    this.$store.commit('increment')
    console.log(this.$store.state.count)
  }
}

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, para que você possa raciocinar melhor sobre as mudanças de estado em sua aplicação 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.

A seguir, discutiremos cada conceito básico em detalhes muito mais sutis, começando com Estado.