JavaScriptda Vuex qanday holatni boshqarish…

Vuex Vue.js илова барча компонентлари учун марказлаштирилган сақловчи концепциясини амалга оширади.

Vuexнинг асосий тушунчалари:

State: Дастур маълумотлари учун ягона ҳақиқат манбаи.
Getters: Ҳолатдан олинган қўшимча хусусиятлар, маълумотларни ҳисоблаш ёки фильтрлаш учун ишлатилади.
Mutations: Ҳолатни ўзгартирувчи синхрон функциялар. Улар холатни ўзгартиришнинг ягона усули.
Actions: Ҳар қандай тасодифий логикага эга бўлган асинхрон операциялар ва mutations-ларни чақиришади.
Modules: Магазинни кичик ва мустақил бирликларга бўлиш имконини беради.

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

// компонентдан холатни олиш
this.$store.state.count

// компонентдан getter олиш
this.$store.getters.doubleCount

Vuex ҳолатни бошқаришнинг тузилган ва олдиндан билган усулини таклиф қилади, айниқса катта SPAларда, "бир йўналишли маълумот оқими" моделини қўллаш орқали.

JavaScriptda Vuex qanday holatni boshqarish konseptini amalga oshiradi?