Vuex nima ekanligini o'z so'zlaringiz bilan…

Vuex — bu Vue.js ilovalari uchun holatni boshqarish kutubxonasi. Bu barcha komponentlar uchun markaziy ombor bo‘lib, unda turli qismlardan kirish mumkin bo‘lgan ma’lumotlarni saqlash mumkin, ularni props yoki voqealar orqali uzatishga hojat qolmaydi.

Vuex quyidagi asosiy qismlardan iborat:

State: Barcha umumiy ma’lumotlarni o‘z ichiga olgan obyekt. Bu "haqiqat manbai".
Getters: Holatdan ma’lumot olish uchun funksiyalar. Vue komponentlaridagi hisoblangan xususiyatlarga o‘xshaydi.
Mutations: Holatni to‘g‘ridan-to‘g‘ri o‘zgartiradigan funksiyalar. Ular sinxron. Holatni o‘zgartirishning yagona usuli — mutation chaqirish.
Actions: Asinxron operatsiyalarni o‘z ichiga olishi mumkin bo‘lgan funksiyalar. Ular holatni to‘g‘ridan-to‘g‘ri o‘zgartirmaydi, balki mutations chaqiradi.
Modules: Katta ilovalar uchun omborni modullarga bo‘lish imkonini beradi, har biri o‘zining state, getters, mutations va actions bilan.

Ishlash prinsipi:

Komponentlar getters orqali state dan ma’lumot oladi.
Foydalanuvchi harakatlari (kliklar, kirishlar) actions chaqiradi.
Actions asinxron operatsiyalarni bajarishi mumkin (masalan, API so‘rovlar).
Actions mutations chaqiradi va state ni o‘zgartiradi.
Statedagi o‘zgarishlar avtomatik va reaktiv tarzda komponentlarni yangilaydi.

Misol:

Turli komponentlardan kirish mumkin bo‘lishi kerak bo‘lgan hisoblagichni tasavvur qilamiz.

// 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>Hisoblagich: {{ count }}</p>
    <p>Ikki barobar hisoblagich: {{ doubleCount }}</p>
    <button @click="increment">Qo‘shish</button>
    <button @click="decrement">Olish</button>
    <button @click="incrementAsync">Asinxron qo‘shish</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 ilovaning holat boshqaruvini tashkil qilishga yordam beradi, uni yanada bashoratli va xatolarni aniqlashni osonlashtiradi, ayniqsa katta va murakkab loyihalarda.

Vuex nima ekanligini o'z so'zlaringiz bilan tushuntiring.