Paaiškinkite, kas yra Vuex, savo žodžiais.

Vuex yra bibliotekos būdas valdyti būseną Vue.js programose. Ji sudaro centrinę saugyklą visiems komponentams, kur galima saugoti duomenis, kurie turi būti prieinami iš skirtingų programos dalių be jų perdavimo per props ar įvykius.

Vuex sudarytas iš šių pagrindinių dalių:

• State: Objektas, kuriame saugomi visi bendri programos duomenys. Tai yra "vienintelis tiesos šaltinis".
• Getters: funkcijos, kurios ištraukia duomenis iš būsenos. Jos panašios į skaičiuojamas savybes Vue komponentuose.
• Mutations: funkcijos, kurios tiesiogiai keičia būseną. Jos yra sinchroninės. Vienintelis būdas keisti būseną — iškviesti mutation.
• Actions: funkcijos, kurios gali turėti asinchroninių operacijų. Jos tiesiogiai nekeičia būsenos, o iškviečia mutations.
• Modules: leidžia padalinti saugyklą į modulius, kiekvienas su savo state, getters, mutations ir actions, didelėms programoms.

Veikimo principas:

1. Komponentai gauna duomenis iš state per getters.
2. Vartotojo veiksmai (paspaudimai, įvedimai) iškviečia actions.
3. Actions gali vykdyti asinchronines operacijas (pvz., API užklausas).
4. Actions iškviečia mutations keisti state.
5. State pakeitimai automatiškai reaguoja ir atnaujina komponentus.

Pavyzdys naudojimo:

Tarkime, turime skaitiklį, kurio reikšmė turi būti prieinama iš skirtingų 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>Skaitiklis: {{ count }}</p>
    <p>Dvigubas skaitiklis: {{ doubleCount }}</p>
    <button @click="increment">Pridėti</button>
    <button @click="decrement">Atimti</button>
    <button @click="incrementAsync">Asinchroninis pridėjimas</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 padeda organizuoti programos būsenos valdymą, daro jį labiau prognozuojamą ir lengviau derinamą, ypač dideliuose ir sudėtinguose projektuose.