Vysvětlete, co je Vuex, svými slovy.

Vuex je knihovna správy stavu pro aplikace Vue.js. Představuje centralizované úložiště pro všechny komponenty aplikace, kde lze ukládat data, která by měla být dostupná z různých částí aplikace, aniž by bylo nutné je předávat přes props nebo události.

Vuex se skládá z následujících hlavních částí:

• State: Objekt obsahující všechna společná data aplikace. Je to "jediný zdroj pravdy".
• Getters: Funkce pro získání dat ze stavu. Jsou podobné vypočítaným vlastnostem ve Vue komponentách.
• Mutations: Funkce, které přímo mění stav. Jsou synchronní. Jediný způsob, jak změnit state, je volání mutation.
• Actions: Funkce, které mohou obsahovat asynchronní operace. Přímo nemění stav, ale volají mutations.
• Modules: Umožňují rozdělit úložiště na moduly, každý se svým vlastním state, getters, mutations a actions, pro větší aplikace.

Princip fungování:

1. Komponenty získávají data ze state přes getters.
2. Uživatelské akce (kliknutí, vstupy) volají actions.
3. Actions mohou provádět asynchronní operace (například požadavky na API).
4. Actions volají mutations pro změnu state.
5. Změny state se automaticky reaktivně aktualizují komponenty.

Příklad použití:

Předpokládejme, že máme čítač, jehož hodnota by měla být dostupná z různých komponent.

// 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">Přidat</button>
    <button @click="decrement">Odebrat</button>
    <button @click="incrementAsync">Asynchronně přidat</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áhá organizovat správu stavu aplikace, činí ji předvídatelnější a snadněji laditelnou, zejména ve velkých a složitých projektech.