Објасните шта је Vuex својим речима.

Vuex је библиотека за управљање стањем за Vue.js апликације. Она представља централизовано складиште за све компоненте апликације, где можете чувати податке који треба да буду доступни из различитих делова апликације без потребе да их преносите кроз пропсе или догађаје.

Vuex се састоји од следећих главних делова:

• State: Објекат који садржи све заједничке податке апликације. То је "једини извор истине".
• Getters: Функције за добијање података из стања. Сличне су израчунским својствима у Vue компонентама.
• Mutations: Функције које директно мењају стање. Оне су синхроне. Једини начин да се промени state је позивом mutation.
• Actions: Функције које могу садржати асинхроне операције. Не мењају стање директно, већ позивају mutations.
• Modules: Омогућавају делење складишта на модуле, сваки са својим state, getters, mutations и actions, за велике апликације.

Принцип рада:

1. Компоненте добијају податке из state преко getters.
2. Акције корисника (кликови, уноси) позивају actions.
3. Actions могу извршавати асинхроне операције (нпр. захтеви ка API-ју).
4. Actions позивају mutations за промену state.
5. Промене у 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 помаже у организовању управљања стањем апликације, чинећи га предвидљивијим и лакшим за дебаговање, посебно у великим и сложеним пројектима.