Vuex деген эмне экенин өз сөздөрүңүз менен…

Vuex — бул Vue.js колдонмолору үчүн абал башкаруу китепканасы. Ал бардык компоненттер үчүн борборлоштурулган сактагычты камсыз кылат, анда ар кандай бөлүктөрдөн жеткиликтүү болушу керек болгон маалыматтарды сактоого болот, пропс же иш-чаралар аркылуу өткөрүүнү талап кылбай.

Vuex негизги бөлүктөрдөн турат:

State: Бардык жалпы маалыматтарды камтыган обьект. Бул "чындык булагы".
Getters: абалдан маалымат алуу үчүн функциялар. Алар Vue компоненттериндеги эсептелген мүнөздөмөлөргө окшош.
Mutations: түздөн-түз абалды өзгөртүүчү функциялар. Алар синхрондуу. абалды өзгөртүүнүн жалгыз жолу — mutation чакыруу.
Actions: асинхрондук операцияларды камтыган функциялар. Алар тийиштүү өзгөртүүлөрдү түздөн-түз жасабайт, ал эми mutations чакырат.
Modules: сактагычты бөлүмдөргө бөлүүгө мүмкүндүк берет, ар биринде өзүнүн state, getters, mutations жана actions бар, чоң долбоорлор үчүн.

Ишке ашыруу принциби:

Компоненттер getters аркылуу state дан маалымат алат.
Колдонуучу аракеттери (басуулар, киргизүүлөр) 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 деген эмне экенин өз сөздөрүңүз менен түшүндүрүңүз.