JavaScript-də Vuex hansı vəziyyət idarəetmə konseptini həyata keçirir?

Vuex Vue.js tətbiqinin bütün komponentləri üçün mərkəzləşdirilmiş mağaza konseptini həyata keçirir.

Vuex-in əsas anlayışları:

• State: Tətbiq məlumatları üçün yeganə həqiqət mənbəyi.
• Getters: Dövlətin törəmə xüsusiyyətləri, məlumatların hesablanması və ya filtrlənməsi üçün istifadə olunur.
• Mutations: Sinxron funksiyalar, dövlətə dəyişikliklər edir. Onlar dövlətin dəyişdirilməsinin yeganə yoludur.
• Actions: Hər hansı arzu olunan məntiqi ehtiva edə bilən və mutations çağıran asinxron əməliyyatlar.
• Modules: Mağazanın daha kiçik və müstəqil vahidlərə bölünməsinə imkan verir.

Vuex ilə işləmə nümunəsi:

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

// komponentdən mutation çağırmaq
this.$store.commit('increment')

// komponentdən action çağırmaq
this.$store.dispatch('incrementAsync')

// state-ə çıxış
this.$store.state.count

// getter-ə çıxış
this.$store.getters.doubleCount

Vuex, xüsusən böyük SPA-larda vəziyyətin idarə olunması üçün strukturlaşdırılmış və proqnozlaşdırıla bilən bir yol təqdim edir, "bir istiqamətli məlumat axını" nümunəsini tətbiq edir.