Ce concept de gestionare a stării implementează Vuex în JavaScript?

Vuex implementează conceptul de magazin centralizat pentru toate componentele aplicației Vue.js.

Concepte cheie ale Vuex:

• State: Sursa unică de adevăr pentru datele aplicației.
• Getters: Proprietăți derivate din state, utilizate pentru calcularea sau filtrarea datelor.
• Mutations: Funcții sincrone care modifică state-ul. Sunt singura modalitate de a schimba state-ul.
• Actions: Operațiuni asincrone care pot conține orice logică arbitrară și apelează mutations.
• Modules: Permite împărțirea store-ului în unități mai mici și autonome.

Exemplu de lucru cu 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
    }
  }
})

// apelare mutation din componentă
this.$store.commit('increment')

// apelare action din componentă
this.$store.dispatch('incrementAsync')

// obținerea state-ului din componentă
this.$store.state.count

// obținerea getter-ului din componentă
this.$store.getters.doubleCount

Vuex oferă o modalitate structurată și previzibilă de gestionare a stării, mai ales în SPA-uri mari, impunând modelul de "flux de date unidirecțional".