Izskaidrojiet, kas ir Vuex, saviem vārdiem.

Vuex ir bibliotēka stāvokļa pārvaldībai Vue.js lietojumprogrammās. Tā nodrošina centrālo glabātuvi visiem komponentiem, kurā var glabāt datus, kas jābūt pieejamiem no dažādām lietojuma daļām bez to nodošanas caur propēm vai notikumiem.

Vuex sastāv no šādām galvenajām daļām:

• State: Objekts, kas satur visus kopīgos lietojuma datus. Tas ir "patiesības avots".
• Getters: Funkcijas, kas iegūst datus no stāvokļa. Tie ir līdzīgi aprēķinātām īpašībām Vue komponentos.
• Mutācijas: Funkcijas, kas tieši maina stāvokli. Tās ir sinhronas. Vienīgais veids, kā mainīt stāvokli — izsaukt mutation.
• Actions: Funkcijas, kas var saturēt asīnhronas operācijas. Tās tieši nemaina stāvokli, bet izsauc mutations.
• Modules: Ļauj sadalīt glabātuvi moduļos, katram ar savu state, getters, mutations un actions, lielākām lietojumprogrammām.

Darba princips:

1. Komponenti iegūst datus no state caur getters.
2. Lietotāja darbības (klikšķi, ievades) izsauc actions.
3. Actions var veikt asīnhronas operācijas (piemēram, API pieprasījumus).
4. Actions izsauc mutations, lai mainītu state.
5. State izmaiņas automātiski reaktīvi atjaunina komponentus.

Piemērs lietošanai:

Pieņemsim, mums ir skaitītājs, kura vērtība jābūt pieejamai no dažādām komponentēm.

// 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>Skaitītājs: {{ count }}</p>
    <p>Dublētais skaitītājs: {{ doubleCount }}</p>
    <button @click="increment">Pievienot</button>
    <button @click="decrement">Atņemt</button>
    <button @click="incrementAsync">Asinhroni pievienot</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 palīdz organizēt lietojumprogrammas stāvokļa pārvaldību, padara to prognozējamāku un vieglāk labojamu, īpaši lielās un sarežģītās projektos.