Welches Konzept der Zustandsverwaltung implementiert Vuex in JavaScript?

Vuex implementiert das Konzept eines zentralisierten Stores für alle Komponenten der Vue.js-Anwendung.

Wichtige Konzepte von Vuex:

• State: Die einzige Quelle der Wahrheit für die Anwendungsdaten.
• Getters: Abgeleitete Eigenschaften des States, die zur Berechnung oder Filterung von Daten verwendet werden.
• Mutations: Synchrone Funktionen, die den State ändern. Sie sind der einzige Weg, den State zu verändern.
• Actions: Asynchrone Operationen, die beliebige Logik enthalten können und Mutations aufrufen.
• Modules: Ermöglichen es, den Store in kleinere, eigenständige Einheiten zu unterteilen.

Beispiel für die Arbeit mit 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
    }
  }
})

// Mutation aus Komponente aufrufen
this.$store.commit('increment')

// Action aus Komponente aufrufen
this.$store.dispatch('incrementAsync')

// State aus Komponente abrufen
this.$store.state.count

// Getter aus Komponente abrufen
this.$store.getters.doubleCount

Vuex bietet eine strukturierte und vorhersehbare Möglichkeit, den Zustand zu verwalten, insbesondere in großen SPA, durch die Durchsetzung des "unidirektionalen Datenfluss"-Musters.