Vysvetlite, čo je Vuex, svojimi slovami.

Vuex je knižnica na riadenie stavu pre aplikácie Vue.js. Predstavuje centralizované úložisko pre všetky komponenty aplikácie, kde je možné ukladať údaje, ktoré by mali byť dostupné z rôznych častí aplikácie bez nutnosti ich prenášania cez props alebo udalosti.

Vuex sa skladá z nasledujúcich hlavných častí:

• State: Objekt obsahujúci všetky spoločné údaje aplikácie. Je to "jediný zdroj pravdy".
• Getters: Funkcie na získanie údajov zo stavu. Sú podobné vypočítavaným vlastnostiam vo Vue komponentoch.
• Mutations: Funkcie, ktoré priamo menia stav. Sú synchronné. Jediný spôsob, ako zmeniť state, je zavolaním mutation.
• Actions: Funkcie, ktoré môžu obsahovať asynchrónne operácie. Nezmenia stav priamo, ale volajú mutations.
• Modules: Umožňujú rozdeliť úložisko na moduly, každý so svojím state, getters, mutations a actions, pre väčšie aplikácie.

Princíp fungovania:

1. Komponenty získavajú údaje zo state cez getters.
2. Akcie používateľa (kliknutia, vstupy) volajú actions.
3. Actions môžu vykonávať asynchrónne operácie (napríklad požiadavky na API).
4. Actions volajú mutations na zmenu state.
5. Zmeny state sa automaticky reaktívne aktualizujú komponenty.

Príklad použitia:

Predpokladajme, že máme čítač, ktorého hodnota by mala byť dostupná z rôznych komponentov.

// 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>Čítač: {{ count }}</p>
    <p>Dvojnásobný čítač: {{ doubleCount }}</p>
    <button @click="increment">Pridať</button>
    <button @click="decrement">Odobrať</button>
    <button @click="incrementAsync">Asynchrónne pridať</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 pomáha organizovať správu stavu aplikácie, robí ho predvídateľnejším a jednoduchším na ladenie, najmä v veľkých a zložitých projektoch.