Նկարագրեք, թե ինչ է Vuex-ը ձեր սեփական բառերով։

Vuex գրադարանը Vue.js հավելվածների վիճակի կառավարման համար։ Այն կենտրոնական պահեստ է բոլոր կոմպոնենտների համար, որտեղ կարելի է պահել տվյալներ, որոնք պետք է հասանելի լինեն տարբեր մասերից՝ առանց նրանց փոխանցելու պրոփերով կամ իրադարձություններով:

Vuex-ը բաղկացած է հետևյալ հիմնական մասերից՝

• State: Օբյեկտ, որը պարունակում է բոլոր ընդհանուր տվյալները։ Դա է "միակ ճշմարտության աղբյուրը"։
• Getters: Ֆունկցիաներ, որոնք ստանում են տվյալները վիճակից։ Դրանք նման են հաշվարկվող հատկությունների Vue կոմպոնենտներում:
• Mutations: Ֆունկցիաներ, որոնք ուղղակիորեն փոխում են վիճակը։ Դրանք սինխրոնային են։ Միակ միջոցը վիճակին փոխելու համար՝ կանչել 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-ը օգնում է կազմակերպել հավելվածի վիճակի կառավարմանը, դարձնելով այն ավելի կանխատեսելի և հեշտ հարթելու, հատկապես մեծ և բարդ նախագծերում։