Ποια έννοια διαχείρισης κατάστασης υλοποιεί το Vuex σε JavaScript;

Vuex υλοποιεί την έννοια ενός κεντρικού αποθηκευτικού χώρου για όλα τα συστατικά της εφαρμογής Vue.js.

Βασικές έννοιες του Vuex:

• State: Μία μοναδική πηγή αλήθειας για τα δεδομένα της εφαρμογής.
• Getters: Προϊόντα που προέρχονται από το state, χρησιμοποιούνται για τον υπολογισμό ή το φιλτράρισμα δεδομένων.
• Mutations: Συγχρονες συναρτήσεις που αλλάζουν το state. Είναι ο μόνος τρόπος για να αλλάξει κανείς το state.
• Actions: Ασύγχρονες λειτουργίες που μπορούν να περιέχουν οποιαδήποτε λογική και καλούν mutations.
• Modules: Επιτρέπουν το διαχωρισμό του store σε μικρότερες, αυτόνομες μονάδες.

Παράδειγμα χρήσης του 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 από το συστατικό
this.$store.commit('increment')

// κλήση action από το συστατικό
this.$store.dispatch('incrementAsync')

// λήψη state από το συστατικό
this.$store.state.count

// λήψη getter από το συστατικό
this.$store.getters.doubleCount

Το Vuex παρέχει έναν δομημένο και προβλέψιμο τρόπο διαχείρισης της κατάστασης, ειδικά σε μεγάλα SPA, επιβάλλοντας το μοτίβο "μονοκατευθυνόμενης ροής δεδομένων".