JavaScript'te Vuex hangi durum yönetimi kavramını uygular?

Vuex, Vue.js uygulamasındaki tüm bileşenler için merkezi bir mağaza kavramını uygular.

Vuex'in temel kavramları:

• State: Uygulama verileri için tek gerçek kaynağı.
• Getters: Durumdan türetilmiş özellikler, veri hesaplama veya filtreleme için kullanılır.
• Mutations: Durumu değiştiren senkron fonksiyonlar. Durumu değiştirmenin tek yoludur.
• Actions: Herhangi bir rastgele mantık içerebilen ve mutations çağıran asenkron işlemler.
• Modules: Mağazayı daha küçük, bağımsız birimlere bölmeye olanak tanır.

Vuex ile çalışma örneği:

// mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  }
})

// bileşenden mutation çağırma
this.$store.commit('increment')

// bileşenden action çağırma
this.$store.dispatch('incrementAsync')

// bileşenden state alma
this.$store.state.count

// bileşenden getter alma
this.$store.getters.doubleCount

Vuex, özellikle büyük SPA'larda durumu yönetmenin yapılandırılmış ve öngörülebilir bir yolunu sağlar, "tek yönlü veri akışı" desenini zorunlu kılar.