Kādu stāvokļa pārvaldības koncepciju īsteno Vuex JavaScript?

Vuex īsteno centralizētas veikala koncepciju visiem Vue.js komponentiem.

Galvenās Vuex koncepcijas:

• State: Vienīgais patiesības avots lietojumprogrammas datos.
• Getters: No state izrietošas īpašības, kas tiek izmantotas datu aprēķināšanai vai filtrēšanai.
• Mutations: Sinhronas funkcijas, kas maina state. Tās ir vienīgais veids, kā mainīt state.
• Actions: Asinhronas operācijas, kas var saturēt jebkādu loģiku un izsauc mutations.
• Modules: Ļauj sadalīt veikalu mazākās, pašpietiekamās vienībās.

Piemērs ar 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
    }
  }
})

// izsauc mutāciju no komponenta
this.$store.commit('increment')

// izsauc darbību no komponenta
this.$store.dispatch('incrementAsync')

// iegūst stāvokli no komponenta
this.$store.state.count

// iegūst getter no komponenta
this.$store.getters.doubleCount

Vuex nodrošina strukturētu un paredzamu veidu stāvokļa pārvaldībai, īpaši lielās SPA, ieviešot "vienvirziena datu plūsmas" modeli.