Vuex-ро чӣ гуна аст, бо калимаҳои худ шарҳ диҳед…

Vuex китобхонаест барои идоракунии ҳолат барои барномаҳои Vue.js. Он як анбори марказӣ барои ҳамаи компонентҳо мебошад, ки дар он маълумотҳоро нигоҳ доштан мумкин аст, ки бояд аз қисмҳои гуногуни барнома дастрас бошанд, бе ниёз ба гузаронидани онҳо тавассути props ё ҳодисаҳо.

Vuex аз қисмҳои асосии зерин иборат аст:

State: Объекти, ки ҳамаи маълумоти умумиро дар бар мегирад. Ин "манбаи ягонаи ҳақиқат" мебошад.
Getters: Функсияҳо барои гирифтани маълумот аз ҳолат. Онҳо монанд ба хосиятҳои ҳисобшаванда дар компонентҳои Vue мебошанд.
Mutations: Функсияҳо, ки мустақиман ҳолатро тағир медиҳанд. Онҳо синхронӣ мебошанд. танҳо роҳи тағир додани state ин даъвати mutation мебошад.
Actions: Функсияҳо, ки метавонанд амалҳои асинхронӣ дошта бошанд. Онҳо мустақиман ҳолатро тағир намедиҳанд, балки mutations-ро даъват мекунанд.
Modules: Имкон медиҳанд, ки анборро ба модулҳо тақсим кунанд, ҳар яке бо state, getters, mutations ва actions-и худ, барои барномаҳои калон.

Принсипи кор:

Компонентҳо маълумотро аз state тавассути getters мегиранд.
Ҳаракатҳои корбар (клацҳо, воридотҳо) actions-ро даъват мекунанд.
Actions метавонанд амалҳои асинхронӣ иҷро кунанд (масалан, дархостҳо ба API).
Actions mutations-ро барои тағир додани state даъват мекунанд.
Тағиротҳои 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 кӯмак мекунад дар ташкил додани идоракунии ҳолати барнома, онро пешгӯишаванда ва осонтар барои хатоёбӣ мекунад, махсусан дар проектҳои калон ва мураккаб.

Vuex-ро чӣ гуна аст, бо калимаҳои худ шарҳ диҳед.