Qual concetto di gestione dello stato implementa Vuex in JavaScript?

Vuex implementa il concetto di store centralizzato per tutti i componenti dell'app Vue.js.

Concetti chiave di Vuex:

• State: Fonte unica di verità per i dati dell'app.
• Getters: Proprietà derivate dallo stato, usate per calcolare o filtrare i dati.
• Mutations: Funzioni sincrone che modificano lo stato. Sono l'unico modo per cambiare lo stato.
• Actions: Operazioni asincrone che possono contenere qualsiasi logica arbitraria e chiamano mutations.
• Modules: Permettono di suddividere lo store in unità più piccole e autonome.

Esempio di utilizzo di Vuex:

// mutation
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
    }
  }
})

// chiamata mutation da componente
this.$store.commit('increment')

// chiamata action da componente
this.$store.dispatch('incrementAsync')

// accesso allo stato da componente
this.$store.state.count

// accesso al getter da componente
this.$store.getters.doubleCount

Vuex fornisce un modo strutturato e prevedibile di gestire lo stato, specialmente in grandi SPA, imponendo il pattern di "flusso di dati unidirezionale".