Mutation'lar ve Action'lar
Mutation'lar ve asenkron action'larla durumu değiştirin.
Mutation'lar ve Action'lar, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.
Durumu Güvenle Değiştirme
Vuex'te durumu bir bileşenden doğrudan hiçbir zaman değiştirmezsiniz. Bunun yerine tüm değişiklikler mutasyonlar üzerinden gerçekleşir. Bu tek ve açık yol, her durum değişikliğinin izlenebilir ve Vue DevTools'ta hatalarının ayıklanabilir olmasını sağlar.
Mutasyon Nedir?
Bir mutasyon, geçerli durumu alan ve onu değiştiren eş zamanlı bir işlevdir. Durumun değiştirilmesine yalnızca mutasyonların bulunduğu yerde izin verilir.
mutations: {
increment(state) {
state.count++
}
}Mutasyonlar Eş Zamanlı Olmalıdır
Mutasyonlar eş zamanlı çalışmalıdır. Bir mutasyonun içine ağ çağrısı gibi eş zamansız kod yerleştirirseniz DevTools, durumun gerçekte ne zaman değiştiğini izleyemez ve zamanda geri giterek hata ayıklama bozulur.
Mutasyon Gönderme
Bir mutasyonu çalıştırmak için bir bileşenden adını kullanarak this.$store.commit ile onu commit edersiniz.
methods: {
add() {
this.$store.commit("increment")
}
}Yük Geçirme
Mutasyonlar, yük adı verilen ek bir bağımsız değişken kabul eder; böylece değişikliğe veri geçirebilirsiniz.
mutations: {
incrementBy(state, amount) {
state.count += amount
}
}
// commit with payload
this.$store.commit("incrementBy", 5)Nesne Biçiminde Yükler
Birden fazla değer için nesne biçiminde bir yük geçirin. Bu, konumsal bağımsız değişkenlerden daha açık ve esnektir.
mutations: {
setUser(state, payload) {
state.user = { id: payload.id, name: payload.name }
}
}
this.$store.commit("setUser", { id: 1, name: "Ada" })Eylem Nedir?
Bir eylem, eşzamansız işlemleri ve iş mantığını yönetir. Eylemler durumu doğrudan değiştirmez; bunun yerine mutasyonları uygular. Böylece eşzamansız kod, gerçek durum değişikliğinden ayrı tutulur.
Eylem Tanımlama
Bir eylem, bağlam nesnesini alır. Bu nesne üzerinden mutasyonları commit edebilir veya duruma erişebilirsiniz.
actions: {
async fetchUser(context, userId) {
const res = await fetch("/api/users/" + userId)
const data = await res.json()
context.commit("setUser", data)
}
}Bağlamın Yapısını Çözme
Kısalık sağlamak için commit değerini doğrudan bağlamdan ayırmak yaygın bir uygulamadır.
actions: {
async loadTodos({ commit }) {
commit("setLoading", true)
const res = await fetch("/api/todos")
commit("setTodos", await res.json())
commit("setLoading", false)
}
}Eylem Gönderme
Bileşenler, isteğe bağlı bir yük göndererek eylemleri this.$store.dispatch ile tetikler. Gönderme işlemi, eşzamansız eylemler için bir vaat döndürür.
methods: {
async load() {
await this.$store.dispatch("loadTodos")
}
}Tam Akış
Tam döngü şöyledir: bir bileşen bir eylem gönderir, eylem eşzamansız işlemleri gerçekleştirip bir mutasyonu uygular ve mutasyon durumu değiştirir. Ardından reaktif durum, kullanıcı arayüzünü otomatik olarak günceller.
Kısa Kontrol
Mutasyonlar ve eylemler hakkındaki bilginizi sınayın.
Özet
Durum yalnızca eşzamanlı olan ve commit ile uygulanan mutasyonlar aracılığıyla değişir. Eşzamansız mantık, dispatch ile gönderilen eylemlerde bulunur; bu eylemler hazır olduklarında mutasyonları uygular. Verileri aktarmak için her ikisi de yük kabul eder. Sırada alıcılar ekleyecek ve mağazayı modüllere ayıracaksınız.
Sıkça Sorulan Sorular
“Mutation'lar ve Action'lar” dersi ücretsiz mi?
Evet — “Mutation'lar ve Action'lar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.
“Mutation'lar ve Action'lar” dersinde ne öğreneceğim?
Mutation'lar ve asenkron action'larla durumu değiştirin. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.
“Mutation'lar ve Action'lar” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Vuex Temelleri
- Mutation'lar ve Action'lar
- Getter'lar ve Modüller