JavaScript-ში რა მდგომარეობის მართვის კონცეფციას ახორციელებს Vuex?

Vuex Vue.js განაცხადის ყველა კომპონენტისათვის ცენტრალიზებული საცავის კონცეფციას ახორციელებს.

Vuex-ის ძირითადი კონცეფციები:

• State: ერთიანი წყარო მონაცემებისთვის.
• Getters: წარმოშობილი თვისებები state-დან, რომლებიც გამოიყენება მონაცემების გამოთვლასა და ფილტრაციისთვის.
• Mutations: სინქრონული ფუნქციები, რომლებიც იცვლიან state-ს. ისინი ერთადერთი გზა არის state-ის შეცვლის.
• Actions: ასინქრონული ოპერაციები, რომლებიც შეიძლება შეიცავდეს ნებისმიერი ლოგიკას და იძახიან mutations-ს.
• Modules: საშუალებას აძლევს store-ს დაყოფას პატარა, დამოუკიდებელ ერთეულებად.

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

// mutation-ის გამოძახება კომპონეტიდან
this.$store.commit('increment')

// action-ის გამოძახება კომპონეტიდან
this.$store.dispatch('incrementAsync')

// state-ის მიღება კომპონეტიდან
this.$store.state.count

// getter-ის მიღება კომპონეტიდან
this.$store.getters.doubleCount

Vuex უზრუნველყოფს სტრუქტურირებულ და წინასწარ განსაზღვრულ გზას მდგომარეობის მართვისთვის, განსაკუთრებით დიდ SPA-ებში, ძალადობით "ერთმხრივი მონაცემთა ნაკადის" მოდელს.