Que conceito de gestão de estado o Vuex implementa em JavaScript?

O Vuex implementa o conceito de uma loja centralizada para todos os componentes da aplicação Vue.js.

Conceitos-chave do Vuex:

• Estado: Fonte única de verdade para os dados da aplicação.
• Getters: Propriedades derivadas do estado, usadas para calcular ou filtrar dados.
• Mutations: Funções síncronas que modificam o estado. São a única maneira de alterar o estado.
• Ações: Operações assíncronas que podem conter qualquer lógica arbitrária e chamam mutations.
• Módulos: Permitem dividir a loja em unidades menores e autossuficientes.

Exemplo de uso do Vuex:

// mutação
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
})

// chamar mutação de um componente
this.$store.commit('increment')

// chamar ação de um componente
this.$store.dispatch('incrementAsync')

// obter o estado de um componente
this.$store.state.count

// obter getter de um componente
this.$store.getters.doubleCount

O Vuex fornece uma maneira estruturada e previsível de gerenciar o estado, especialmente em grandes SPA, ao impor o padrão de "fluxo de dados unidirecional".