Vuex Store - Getters Kavramı ve Anlatımı

Vuex Store - Getters Kavramı ve Anlatımı

  Nisan 14, 2021    Gökhan Krl

---

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.