გთხოვთ, ახსენით Vuex-ი თქვენს სიტყვებში.

Vuex არის ბიბლიოთეკა Vue.js აპლიკაციების მდგომარეობის მართვისთვის. იგი წარმოადგენს ცენტრალიზებულ საწყისს ყველა კომპონენტისათვის, სადაც შეიძლება შეინახოს მონაცემები, რომლებიც უნდა იყოს ხელმისაწვდომი სხვადასხვა ნაწილიდან, Prop-ების ან მოვლენების გადაცემის გარეშე.

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-ი ეხმარება აპლიკაციის მდგომარეობის ორგანიზებაში, მას უფრო პროგნოზირებად და დათვალიერებად ხდის, განსაკუთრებით დიდ და რთულ პროექტებში.