Vuex Store - State Kavramı ve Anlatımı

Vuex Store - State Kavramı ve Anlatımı

  Nisan 10, 2021    Gökhan Krl

---

Daha önce Vuex Store'a bir giriş yapmış ve bir Vuex Store örneğini incelemiştik. Oradaki dört bölümden kısaca bahsetmiştik. Bunlar State, Getters, Mutations ve Actions'tı.

State Management Pattern

Vuex bir State Management Pattern yani bunu çevirmeyeceğim ama şöyle söyleyeyim Veri yönetimi kütüphanesidir. Bir devlet düşünün çatısı altında her şey yönetilir, işte State burada devlet konumundadır ve aynı zamanda hem uygulama içerisindeki veriyi hem de kendi kendini yöneten anlamına gelmektedir.

State kavramını anladığımıza göre Vuex'in işlevine geçelim. Vuex tam olarak veriyi veya verileri istediğiniz bir biçimde merkezi bir yapı içerisinde yönetmenizi sağlar. Yani kısaca tüm uygulama içerisinde bir merkezi depo görevi görür. State kavramını yukarıda açıklamıştım. Şimdi tam olarak çalışma sisteminden bahsedeceğim.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    isim: "Gokhan"
  },
  mutations: {
    ismiDegistir (state, data) {
      state.isim = data
    }
  }
})

Yukarıdaki bizim Vuex örneğimiz. Şimdi herhangi bir component içerisinde State'deki isim değerini alalım.

State Verisine Erişim

computed: {
  isim() {
    return this.$store.state.isim
  }    
}

Bildiğiniz gibi computed özelliği Vue'nun reaktivitesine dahil olmadığı için tekrar tekrar hesaplamaya dahil edilmiyor. Store içerisinden veriyi almak için de computed kullanılıyor. Çünkü set/get mantığıyla değil sadece get mantığı ile çalışıyor. Artık "isim" adında bir datamız var ve istediğimiz şekilde kullanabiliriz.

State Verisi Üzerine Değişim Uygulama

Önceki yayında mutationsların state üzerindeki veriyi değiştirmek yani mutasyona uğratmak için kullanıldığından bahsetmiştim. "ismiDegistir" adında bir mutations'ımız var. Şimdi state.isim'e yeni bir değer atayalım. Bunun için Vue örneği içerisinde daima this.$store.commit() fonksiyonunu kullanacağız.

methods: {
  yeniIsim(isim) {
    this.$store.commit('ismiDegistir', isim);
  }
}

Fonksiyon adları karışmasın diye method adını "yeniIsim" olarak kullandım. this.yeniIsim("Adınız") biçiminde artık Store üzerindeki veriyi değiştirebilirsiniz.

 

State üzerindeki verinin nasıl alındığını ve mutasyona uğratıldığını anlattım. Bir sonraki yazımda da Getters özelliğine geçeceğiz.