Εξήγησε τι είναι το Vuex με τα δικά σου λόγια…

Το Vuex είναι μια βιβλιοθήκη διαχείρισης κατάστασης για εφαρμογές Vue.js. Είναι μια κεντρική αποθήκη για όλα τα συστατικά της εφαρμογής, όπου μπορείτε να αποθηκεύσετε δεδομένα που πρέπει να είναι διαθέσιμα από διαφορετικά μέρη της εφαρμογής χωρίς να χρειάζεται να τα μεταβιβάσετε μέσω props ή γεγονότων.

Το Vuex αποτελείται από τα ακόλουθα βασικά μέρη:

State: Αντικείμενο που περιέχει όλα τα κοινά δεδομένα της εφαρμογής. Είναι η "μοναδική πηγή της αλήθειας".
Getters: Συναρτήσεις για την απόκτηση δεδομένων από την κατάσταση. Είναι παρόμοιες με τις υπολογιζόμενες ιδιότητες στα Vue components.
Mutations: Συναρτήσεις που αλλάζουν άμεσα την κατάσταση. Είναι συγχρονες. Ο μόνος τρόπος να αλλάξει κανείς το state είναι καλώντας μια mutation.
Actions: Συναρτήσεις που μπορούν να περιέχουν ασύγχρονες λειτουργίες. Δεν αλλάζουν άμεσα την κατάσταση, αλλά καλούν mutations.
Modules: Επιτρέπουν τον διαχωρισμό του αποθηκευτικού χώρου σε modules, καθένα με το δικό του state, getters, mutations και actions, για μεγάλα έργα.

Αρχή λειτουργίας:

Τα συστατικά λαμβάνουν δεδομένα από το state μέσω των getters.
Οι ενέργειες του χρήστη (κλικ, εισαγωγές) καλούν actions.
Τα Actions μπορούν να εκτελούν ασύγχρονες λειτουργίες (π.χ. αιτήματα API).
Τα Actions καλούν mutations για να αλλάξουν το state.
Οι αλλαγές στο state ενημερώνουν αυτόματα και αντιδραστικά τα συστατικά.

Παράδειγμα χρήσης:

Ας υποθέσουμε ότι έχουμε έναν μετρητή, η τιμή του οποίου πρέπει να είναι διαθέσιμη από διαφορετικά συστατικά.

// store.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

export default store;

<!-- Component.vue -->
<template>
  <div>
    <p>Μετρητής: {{ count }}</p>
    <p>Διπλός μετρητής: {{ doubleCount }}</p>
    <button @click="increment">Πρόσθεση</button>
    <button @click="decrement">Αφαίρεση</button>
    <button @click="incrementAsync">Ασύγχρονη πρόσθεση</button>
  </div>
</template>

<script>
import { useStore } from 'vuex';
import { computed } from 'vue';

export default {
  setup() {
    const store = useStore();

    const count = computed(() => store.state.count);
    const doubleCount = computed(() => store.getters.doubleCount);

    const increment = () => store.commit('increment');
    const decrement = () => store.commit('decrement');
    const incrementAsync = () => store.dispatch('incrementAsync');

    return {
      count,
      doubleCount,
      increment,
      decrement,
      incrementAsync
    };
  }
};
</script>

Εξήγησε τι είναι το Vuex με τα δικά σου λόγια.