Vuex Store - Getters Kavramı ve Anlatımı
Bazen, örneğin bir öğe listesini filtrelemek ve onları saymak gibi, duruma göre çıktısını istediğiniz bir veriyi ayrıca hesaplamamız gerekebilir.
computed: {
gorevListesi() {
return this.$store.state.gorevler.filter(
(gorev) => gorev.bitisDurumu === true
).length;
},
}
Birden fazla alanla bunu kullanmak istiyorsak, ya bu işlevi çoğaltmamız lazım ya da ayrı bir dosyaya ekleyip her ihtiyacımız olduğunda bu dosyayı ilgili component içerisinde import etmemiz gerekir. İki seçenek te düzenli kodlama mantığından biraz uzak.
Vuex Store bu işlevleri Getters üzerinden tanımlamanıza olanak tanır. Bu işlevleri Vue örneğindeki computed'lar üzerinde tanımladığımız işlevler gibi de düşünebilirsiniz. Computed'lar da Getters'lar gibi bağımlılıklarına göre önbelleğe alınır ve sadece belirli bağımlılıklar değiştirildiğinde yeniden işlevsel olarak hesaplamaya dahil edilir.
Getters Tanımlamak
Bir Getters tanımlamak istediğinizde, state'i ilk parametresinden alabilirsiniz.
const store = new Vuex.Store({
state: {
gorevler: [
{ id: 1, baslik: '...', bitisDurumu: true },
{ id: 2, baslik: '...', bitisDurumu: false }
]
},
getters: {
tamamlanmisGorevler: state => {
return state.gorevler.filter(gorev => gorev.bitisDurumu)
}
}
})
Getters'a State Gibi Erişmek
Bir Getters'a "store.getters" üzerinden erişebilirsiniz ve direk nesne öğesi olarak alabilirsiniz.
store.getters.tamamlanmisGorevler
Ayrıca Getters içerisine diğer Getters işlevlerini de alabilirsiniz. İkinci değer olarak da Getters'lara erişebilirsiniz.
getters: {
// ...
bitmisGorevlerinSayisi: (state, getters) => {
return getters.tamamlanmisGorevler.length
}
}
Daha önce tanımlamış olduğumuz "tamamlanmisGorevler" adlı getters'ı yeni bir getters olan "bitmisGorevlerinSayisi" içerisinde kullandık.
Getters'ın Component İçerisinde Kullanımı
Artık onu herhangi bir component içerisinde kullanabiliriz.
computed: {
bitmisGorevler () {
return this.$store.getters.tamamlanmisGorevler
}
}
Not: Getters'ların Vue'nun reaktivite sistemine dahil olduğunu unutmayın.
Method'a Farklı Bir Erişme Biçimi
Getters'lara bir fonksiyon üzerinden argüman da iletebilirsiniz. Bu işlem mağazada bir diziyi sorgulamak istediğinizde kullanışlıdır.
getters: {
// ...
gorevGetir: (state) => (id) => {
return state.gorevler.find(gorev => gorev.id === id)
}
}
store.getters.gorevGetir(2) // -> { id: 2, baslik: '...', tamamlanmis: false }
Yukarıdaki işlem ile "id" üzerinden herhangi bir gorev'i alabiliyoruz.
Getters'lar ile ilgili makalenin sonuna geldik. Bir sonraki yazımda görüşmek üzere.
2013 yılında geniş hayaller ile önce tasarım sonra da yazılım alanında çalışmalar yapmaya başladım. Sıfırdan başlayarak pek çok MVC tabanlı sistemler ve Web Sayfaları tasarladım.