Explică ce este Vuex, cu propriile tale cuvinte…

Vuex este o bibliotecă de gestionare a stării pentru aplicațiile Vue.js. Este un depozit centralizat pentru toate componentele aplicației, unde se pot stoca date care trebuie să fie accesibile din diferite părți ale aplicației fără a fi nevoie să le transmiteți prin props sau evenimente.

Vuex constă din următoarele părți principale:

State: Obiect care conține toate datele comune ale aplicației. Este "sursa unică a adevărului".
Getters: Funcții pentru obținerea datelor din stare. Sunt similare cu proprietățile calculate în componentele Vue.
Mutations: Funcții care modifică direct starea. Sunt sincronice. Singura modalitate de a schimba starea este apelarea unei mutation.
Actions: Funcții care pot conține operații asincrone. Nu modifică direct starea, ci apelează mutations.
Modules: Permite împărțirea depozitului în module, fiecare cu propriul state, getters, mutations și actions, pentru aplicații mari.

Principiul de funcționare:

Componentele obțin date din state prin getters.
Acțiunile utilizatorului (clicuri, introduceri) apelează actions.
Actions pot efectua operații asincrone (de exemplu, solicitări API).
Actions apelează mutations pentru a modifica state.
Modificările state actualizează automat și reactiv componentele.

Exemplu de utilizare:

Să presupunem că avem un contor, a cărui valoare trebuie să fie accesibilă din diferite componente.

// 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>Contor: {{ count }}</p>
    <p>Contor dublu: {{ doubleCount }}</p>
    <button @click="increment">Adaugă</button>
    <button @click="decrement">Scoate</button>
    <button @click="incrementAsync">Adaugă asincron</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>

Explică ce este Vuex, cu propriile tale cuvinte.