Selgitage, mis on Vuex, oma sõnadega.

Vuex on Vue.js rakenduste oleku haldamise raamatukogu. See pakub kõigi komponentide jaoks keskset hoidlat, kus saab salvestada andmeid, mis peaksid olema kättesaadavad erinevatest rakenduse osadest ilma, et neid peaks edasi andma propside või sündmuste kaudu.

Vuex koosneb järgmistest põhiosadest:

• State: Objekt, mis sisaldab kõiki ühiseid andmeid. See on "ainus tõe allikas".
• Getters: Funktsioonid, mis võtavad andmeid olekust. Need on sarnased arvutatavate omadustega Vue komponentides.
• Mutations: Funktsioonid, mis otseselt muudavad olekut. Need on sünkroonilised. Ainus viis oleku muutmiseks on kutsuda mutation.
• Actions: Funktsioonid, mis võivad sisaldada asünkroonseid operatsioone. Need ei muuda olekut otse, vaid kutsuvad mutations.
• Modules: Annab võimaluse jagada hoidlat mooduliteks, igaüks oma state, getters, mutations ja actions-iga, suuremate rakenduste jaoks.

Tööpõhimõte:

1. Komponendid saavad andmeid state-st getters-i kaudu.
2. Kasutaja tegevused (klõpsud, sisestused) kutsuvad actions-i.
3. Actions võivad teha asünkroonseid operatsioone (nt API päringud).
4. Actions kutsuvad mutations-i state muutmiseks.
5. State muutused uuendavad automaatselt reaktiivselt komponendid.

Näide kasutamisest:

Oletame, et meil on loendur, mille väärtus peaks olema kättesaadav erinevatest komponentidest.

// 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>Loendur: {{ count }}</p>
    <p>Kakskordistatud loendur: {{ doubleCount }}</p>
    <button @click="increment">Lisa</button>
    <button @click="decrement">Võta ära</button>
    <button @click="incrementAsync">Asünkroonne lisa</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 aitab organiseerida rakenduse oleku haldamist, muutes selle prognoositavamaks ja lihtsamini silumiseks, eriti suurtes ja keerulistes projektides.