Vuex'in ne olduğunu kendi kelimelerinizle açıklayın…

Vuex, Vue.js uygulamaları için bir durum yönetimi kütüphanesidir. Uygulamanın tüm bileşenleri için merkezi bir depo sağlar ve farklı bölümlerden erişilmesi gereken verileri, props veya olaylar aracılığıyla iletmeye gerek kalmadan saklamaya olanak tanır.

Vuex, aşağıdaki ana bölümlerden oluşur:

State: Uygulamanın tüm ortak verilerini içeren nesne. Bu, "tek gerçek kaynağı"dır.
Getters: Durumdan veri almak için fonksiyonlar. Vue bileşenlerindeki hesaplanmış özelliklere benzerler.
Mutations: Durumu doğrudan değiştiren fonksiyonlar. Bunlar senkroniktir. Durumu değiştirmek için tek yol, mutation çağırmaktır.
Actions: Asenkron işlemler içerebilen fonksiyonlar. Durumu doğrudan değiştirmezler, bunun yerine mutations çağırırlar.
Modules: Depoyu modüllere ayırmaya olanak tanır, her biri kendi state, getters, mutations ve actions ile büyük uygulamalar için.

Çalışma prensibi:

Bileşenler, getters aracılığıyla state'den veri alır.
Kullanıcı eylemleri (tıklamalar, girişler) actions çağırır.
Actions, API istekleri gibi asenkron işlemler yapabilir.
Actions, state'i değiştirmek için mutations çağırır.
state'deki değişiklikler, bileşenleri otomatik ve reaktif olarak günceller.

Kullanım örneği:

Farklı bileşenlerden erişilebilir olması gereken bir sayacı düşünelim.

// 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>Sayaç: {{ count }}</p>
    <p>İki katı sayaç: {{ doubleCount }}</p>
    <button @click="increment">Ekle</button>
    <button @click="decrement">Çıkar</button>
    <button @click="incrementAsync">Asenkron ekle</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, uygulamanın durum yönetimini organize etmeye yardımcı olur, onu daha öngörülebilir ve hata ayıklamayı kolaylaştırır, özellikle büyük ve karmaşık projelerde.

Vuex'in ne olduğunu kendi kelimelerinizle açıklayın.