Milyen állapotkezelési koncepciót valósít meg a Vuex JavaScriptben?

A Vuex egy központosított tárolót valósít meg minden Vue.js alkalmazás összetevő számára.

A Vuex fő fogalmai:

• State: Az alkalmazás adataihoz tartozó egyetlen igazságforrás.
• Getters: Az állapotból származó tulajdonságok, amelyek az adatok kiszámítására vagy szűrésére szolgálnak.
• Mutations: Szinkron funkciók, amelyek módosítják az állapotot. Ezek az egyetlen módjai az állapot változtatásának.
• Actions: Aszinkron műveletek, amelyek bármilyen logikát tartalmazhatnak, és meghívják a mutációkat.
• Modules: Lehetővé teszik az állomány kisebb, önálló egységekre bontását.

Vuex példák:

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

// mutáció hívása komponensből
this.$store.commit('increment')

// akció hívása komponensből
this.$store.dispatch('incrementAsync')

// állapot elérése komponensből
this.$store.state.count

// getter elérése komponensből
this.$store.getters.doubleCount

A Vuex strukturált és előre látható módot kínál az állapot kezelésére, különösen nagy SPA-k esetén, az "egyenirányú adatfolyam" mintát követve.