Vuex Store - Mutations'da Sabitler ve Senkronize

Vuex Store - Mutations'da Sabitler ve Senkronize

  Nisan 25, 2021    Gökhan Krl

---

Mutasyonlar İçin Sabitleri Kullanmak

Çeşitli Flux uygulamalarında mutasyon türleri için sabitlerin kullanılması yaygın olarak görülen bir durumdur. Bu, kodun linter gibi araçlardan yararlanmasını sağlar ve tüm sabitleri tek bir dosyaya koymak, beraber çalıştığınız geliştiricilerin tüm uygulamada hangi mutasyonların mümkün olduğunu bir bakışta görmelerini sağlar:

// mutasyon-listesi.js
export const MUTASYONLAR = 'MUTASYONLAR'

// store.js
import Vuex from 'vuex'
import { BIR_MUTASYON } from './mutasyon-listesi'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // Sabit'i "ES2015 Computed Property Name" özelliği ile
    // bir fonksiyon adı olarak kullanabilirsiniz
    [BIR_MUTASYON] (state) {
      // bir mutasyon gerçekleştir
    }
  }
})

Sabitlerin kullanılıp kullanılmaması büyük ölçüde bir tercihtir ve birçok geliştiricinin olduğu büyük projelerde yardımcı olabilir, ancak beğenmezseniz tamamen isteğe bağlıdır.

Mutasyonlar Senkron Olarak Çalışmalıdır

Hatırlanması gereken önemli bir kural, mutasyonların eşzamanlı olması gerektiğidir. Neden mi ? Aşağıdaki örneği düşünün:

mutations: {
  birMutasyon (state) {
    api.callAsyncMethod(() => {
      state.miktar++
    })
  }
}

Şimdi uygulamada hata ayıkladığımızı ve devtool üzerinden Vue'nun Mutations loglarına baktığımızı düşünün. Kaydedilen her mutasyon için, devtool, "önce" ve "sonra" olarak durumları anlık görüntü biçiminde yakalama ihtiyacı duyacak. Bu yüzden, yukarıdaki örnekte olduğu gibi mutasyonun içindeki eşzamansız bir geri çağırma fonksiyonu bunu imkansız kılar. Mutasyon işlendiğinde callback o anda anlık olarak çağrılmayacağı için devtool'un callback'in ne zaman çağrılacağını bilmesinin bir yolu yoktur. Dolayısıyla callback ile gerçekleştirilen herhangi bir mutasyon işlemi takip edilemez!

Mutasyonlar ile ilgili anlatım bilgileri bu kadardı. Bundan sonraki süreçte Actions'lara değineceğiz. Teşekkürler.