Jaką koncepcję zarządzania stanem implementuje Vuex w JavaScript?

Vuex wdraża koncepcję scentralizowanego magazynu dla wszystkich komponentów aplikacji Vue.js.

Kluczowe pojęcia Vuex:

• State: Jedno źródło prawdy dla danych aplikacji.
• Getters: Właściwości pochodne od stanu, używane do obliczania lub filtrowania danych.
• Mutations: Funkcje synchroniczne, które zmieniają stan. Są jedynym sposobem zmiany stanu.
• Actions: Operacje asynchroniczne, które mogą zawierać dowolną logikę i wywołują mutations.
• Modules: Pozwalają dzielić magazyn na mniejsze, samodzielne jednostki.

Przykład pracy z 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
    }
  }
})

// wywołanie mutation z komponentu
this.$store.commit('increment')

// wywołanie action z komponentu
this.$store.dispatch('incrementAsync')

// pobranie stanu z komponentu
this.$store.state.count

// pobranie getter z komponentu
this.$store.getters.doubleCount

Vuex zapewnia uporządkowany i przewidywalny sposób zarządzania stanem, szczególnie w dużych SPA, wymuszając wzorzec "jednokierunkowego przepływu danych".