Magyarázd el saját szavaiddal, mi az a Vuex.

A Vuex a Vue.js alkalmazások állapotkezelő könyvtára. Egy központi tárolót biztosít az összes komponens számára, ahol olyan adatokat lehet tárolni, amelyeknek több része is hozzáférhet anélkül, hogy propokon vagy eseményeken keresztül kellene átadniuk.

A Vuex a következő fő részekből áll:

• State: Az összes közös adatot tartalmazó objektum. Ez az "igazság forrása".
• Getters: Olyan függvények, amelyek az állapotból származó adatokat nyernek ki. Hasonlóak a Vue komponensek számított tulajdonságaihoz.
• Mutations: Olyan függvények, amelyek közvetlenül módosítják az állapotot. Ezek szinkronok. Az egyetlen módja az állapot módosításának, ha meghívunk egy mutation-t.
• Actions: Olyan függvények, amelyek aszinkron műveleteket tartalmazhatnak. Nem módosítják közvetlenül az állapotot, hanem mutations-t hívnak meg.
• Modules: Lehetővé teszik az állomány több modulra bontását, mindegyik saját state, getters, mutations és actions-ökkel, nagyobb alkalmazások esetén.

Működési elv:

1. A komponensek az state-ből származó adatokat a getters-en keresztül kapják.
2. A felhasználói műveletek (kattintások, beviteli események) az actions-t hívják.
3. Az actions aszinkron műveleteket hajthatnak végre (pl. API-kérések).
4. Az actions meghívják a mutations-t az state módosításához.
5. A state változásai automatikusan reaktívan frissítik a komponenseket.

Használati példa:

Tegyük fel, van egy számláló, amely értékét több komponensben is elérhetővé kell tenni.

// 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>Számláló: {{ count }}</p>
    <p>Dupla számláló: {{ doubleCount }}</p>
    <button @click="increment">Növel</button>
    <button @click="decrement">Csökkent</button>
    <button @click="incrementAsync">Aszinkron növelés</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>

A Vuex segít az alkalmazás állapotának szervezésében, így az könnyebben előrejelezhető és hibakereshető, különösen nagy és összetett projektekben.