Kokį būsenos valdymo koncepciją įgyvendina Vuex JavaScript?

Vuex įgyvendina centralizuotos parduotuvės koncepciją visiems Vue.js programos komponentams.

Pagrindinės Vuex sąvokos:

• State: Vienintelis tiesos šaltinis programos duomenims.
• Getters: Iš state išvestos savybės, naudojamos duomenų skaičiavimui ar filtravimui.
• Mutations: Sinchroninės funkcijos, kurios keičia state. Tai vienintelis būdas keisti state.
• Actions: Asinchroninės operacijos, kurios gali turėti bet kokią logiką ir kviečia mutations.
• Modules: Leidžia suskirstyti parduotuvę į mažesnes, savarankiškas dalis.

Pavyzdys, kaip dirbti su 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
    }
  }
})

// iš komponente kviečiama mutacija
this.$store.commit('increment')

// iš komponente kviečiama veiksmas
this.$store.dispatch('incrementAsync')

// iš komponente gaunamas state
this.$store.state.count

// iš komponente gaunamas getter
this.$store.getters.doubleCount

Vuex suteikia struktūruotą ir prognozuojamą būdą valdyti būseną, ypač didelėse SPA, įgyvendinant "vienpusišką duomenų srautą" modelį.