Millist oleku haldamise kontseptsiooni rakendab Vuex JavaScriptis?

Vuex rakendab keskseotud poe kontseptsiooni kõigi Vue.js rakenduse komponentide jaoks.

Vuex-i põhikontseptsioonid:

• State: Ainsaks tõe allikaks rakenduse andmetele.
• Getters: State-ist tuletatud omadused, mida kasutatakse andmete arvutamiseks või filtreerimiseks.
• Mutations: Sünkroonsed funktsioonid, mis muudavad state-i. Need on ainus viis state-i muutmiseks.
• Actions: Asünkroonilised toimingud, mis võivad sisaldada mis tahes loogikat ja kutsuvad mutations-i.
• Modules: Võimaldavad jagada poe väiksemateks, iseseisvateks üksusteks.

Näide Vuex-i kasutamisest:

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

// mutatsiooni kutsumine komponendist
this.$store.commit('increment')

// tegevuse kutsumine komponendist
this.$store.dispatch('incrementAsync')

// state saamine komponendist
this.$store.state.count

// getter saamine komponendist
this.$store.getters.doubleCount

Vuex pakub struktureeritud ja prognoositavat viisi oleku haldamiseks, eriti suurtes SPA-des, kehtestades "ühesuunalise andmevoo" mustri.