Aký koncept správy stavu implementuje Vuex v JavaScript?

Vuex implementuje koncept centralizovaného obchodu pre všetkých komponentov Vue.js aplikácie.

Kľúčové pojmy Vuex:

• State: Jediný zdroj pravdy pre údaje aplikácie.
• Getters: Odvozené vlastnosti stavu, používané na výpočet alebo filtrovanie údajov.
• Mutations: Synchronous funkcie, ktoré menia stav. Sú jediným spôsobom, ako zmeniť stav.
• Actions: Asynchrónne operácie, ktoré môžu obsahovať akúkoľvek logiku a volajú mutations.
• Modules: Umožňujú rozdelenie obchodu na menšie, samostatné jednotky.

Príklad práce s 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
    }
  }
})

// volanie mutation z komponentu
this.$store.commit('increment')

// volanie action z komponentu
this.$store.dispatch('incrementAsync')

// získanie stavu z komponentu
this.$store.state.count

// získanie getteru z komponentu
this.$store.getters.doubleCount

Vuex poskytuje štruktúrovaný a predvídateľný spôsob správy stavu, najmä v veľkých SPA, vynucovaním vzoru "jednosmerného toku dát".