Sobes.tech
Middle

Ի՞նչ կարգավիճակի կառավարման կոնցեպտ է իրականացնում Vuex-ը JavaScript-ում։

sobes.tech AI

Պատասխան AI-ից

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-ներում, պարտադրելով "մեկ ուղղությամբ տվյալների հոսք" մոդելը։