Jaký koncept správy stavu implementuje Vuex v JavaScriptu?

Vuex implementuje koncept centralizovaného obchodu pro všechny komponenty aplikace Vue.js.

Klíčové pojmy Vuex:

• State: Jediný zdroj pravdy pro data aplikace.
• Getters: Odvozené vlastnosti stavu, používané pro výpočet nebo filtrování dat.
• Mutations: Synchronous funkce, které mění stav. Jsou jediným způsobem, jak změnit stav.
• Actions: Asynchronní operace, které mohou obsahovat libovolnou logiku a volají mutations.
• Modules: Umožňují rozdělit obchod na menší, samostatné jednotky.

Pří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
    }
  }
})

// volání mutation ze součásti
this.$store.commit('increment')

// volání action ze součásti
this.$store.dispatch('incrementAsync')

// získání stavu ze součásti
this.$store.state.count

// získání getteru ze součásti
this.$store.getters.doubleCount

Vuex poskytuje strukturovaný a předvídatelný způsob správy stavu, zejména ve velkých SPA, tím, že vynucuje vzor "unidirekčního toku dat".