Vuex Store - Giriş ve Konu Anlatımı

Vuex Store - Giriş ve Konu Anlatımı

  Nisan 07, 2021    Gökhan Krl

---

Vue.js ile beraber Vuex'e girmeye karar verdiyseniz yada ne olduğunu merak ediyorsanız, buradan itibaren temiz bir giriş yapacağız. Temelden derinlere doğru inerek Vuex içerisindeki tüm konulara ve alanlara değinmek istiyorum. Hazırsanız başlayalım.

Vuex Kullanım Amacı

Vue.js de dikkat ettiyseniz component yapısı içerisinde veriyi içerden dışarıya, yani alt component'ten üst component'e göndermek zor ve karmaşık bir durum. Ayrıca verinin alt component'te sürekli değişimini ve bunun gibi onlarca component olduğunu düşünün.

Tam olarak burada Vuex veriyi merkezi bir yerde birleştirip tüm component'ler arasında paylaşmayı ve daha dinamik bir yapıyı sağlamayı amaçlıyor. 

Vuex Kullanımına Giriş

Kurulumdan bahsetmeyeceğim, yeni bir Vue örneği ile beraber gelen seçenekler arasında direk kurabiliyorsunuz veya vâr olan bir projeye dahil etmek istiyorsanız netten dökümantasyon incelemek durumundasınız.

Vuex projenizde kuruysa veya kurduysanız ilk olarak /store dizinindeki index.js'i inceleyelim.

import Vue from 'vue' 

import Vuex from 'vuex'




Vue.use(Vuex) 




const store = new Vuex.Store({ 

  state: { 

    count: 0 

  },

  getters: {

  

  }   

  mutations: { 

    increment (state) { 

      state.count++ 

    } 

  },

  actions: {




  }

})

Burada gördüğünüz üzere bir Vuex Store nesnesi oluşturulmuş gözükmekte. Bölümleri şu şekilde.

State: Store verilerinin tutulduğu alan. Store'a ait tüm veriler State içerisinde barındırılır. Yani kaynak burasıdır.

Getters: State içerisindeki veriyi hem direk State üzerinden hem de buradan alabilirsiniz. Ancak Getters'ın farkı veriye mesela "State.kullanicilar.map( ... return x ...)" gibi bir değişiklik yaparak çıktı almak istediğiniz durumlarda kullanılır.

Mutations: State üzerindeki bir veriyi güncellemek istediğiniz zaman Mutations'ları kullanıyoruz. Yani bu demek oluyor ki State üzerindeki veriyi doğrudan değiştiremezsiniz.

Actions: Bazen çok daha detaylı işlemler yapmanız gerekir, mesela form isteği atıp gelen veriyi işlemek gibi. Bunun için Mutations değil Actions'ları kullanırsınız. Sonra veriyi yine değiştirmek için Actions üzerindeki işleminiz bitince, yine Actions içerisinde Mutations'ları çağırır veri güncellemeyi aynı metot ile yaparsınız.

Bu yazımda inceleyeceklerimiz bu kadardı. Bir sonraki yazımda Vuex Store üzerindeki State özelliğine değineceğiz. Teşekkürler.