Koju koncept upravljanja stanjima implementira Vuex u JavaScriptu?

Vuex implementira koncept centralizovane prodavnice za sve komponente Vue.js aplikacije.

Ključni pojmovi Vuex-a:

• State: Jedini izvor istine za podatke aplikacije.
• Getters: Derivisana svojstva stanja, korišćena za računanje ili filtriranje podataka.
• Mutations: Sinhrone funkcije koje menjaju stanje. One su jedini način za promenu stanja.
• Actions: Asinhrone operacije koje mogu sadržavati bilo koju logiku i pozivaju mutations.
• Modules: Omogućavaju razbijanje prodavnice na manje, samostalne jedinice.

Primer rada sa Vuex-om:

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

// pozivanje mutacije iz komponente
this.$store.commit('increment')

// pozivanje akcije iz komponente
this.$store.dispatch('incrementAsync')

// dobijanje stanja iz komponente
this.$store.state.count

// dobijanje gettera iz komponente
this.$store.getters.doubleCount

Vuex pruža strukturiran i predvidiv način upravljanja stanjem, posebno u velikim SPA, namećući obrazac "jednosmernog toka podataka".