Vue Academy · Ders

Getter'lar ve Modüller

Türetilmiş durumu hesaplayın ve store'u modüller hâlinde düzenleyin.

Getter'lar ve Modüller, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 3. 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.

Alıcılarla Hesaplanan Durum

Bazen filtrelenmiş bir liste veya sayaç gibi türetilmiş bir duruma ihtiyaç duyarsınız. Alıcı, mağazadaki hesaplanan özelliğin karşılığıdır: değeri durumdan türetir ve bağımlılıkları değişene kadar sonucu önbelleğe alır.

Alıcı Tanımlama

Alıcı, durumu alan ve türetilmiş bir değer döndüren bir işlevdir.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  }
}

Diğer Alıcıları Kullanan Alıcılar

Bir alıcı, diğer tüm alıcıları içeren ikinci bir bağımsız değişken alır; böylece alıcıları birleştirebilirsiniz.

getters: {
  completedTodos(state) {
    return state.todos.filter(t => t.done)
  },
  completedCount(state, getters) {
    return getters.completedTodos.length
  }
}

Alıcılara Erişme

Alıcıları, hesaplanan bir özellik içinde this.$store.getters üzerinden okuyun.

computed: {
  doneCount() {
    return this.$store.getters.completedCount
  }
}

Yöntem Tarzı Alıcılar

Bağımsız değişken aktarabilmek için bir alıcıdan işlev döndürün. Yöntem tarzı alıcıların önbelleğe alınmadığını ve her çağrıda çalıştırıldığını unutmayın.

getters: {
  todoById: (state) => (id) => {
    return state.todos.find(t => t.id === id)
  }
}

// usage
this.$store.getters.todoById(3)

mapGetters Yardımcısı

mapState gibi mapGetters yardımcısı da alıcıları otomatik olarak hesaplanan özelliklere dönüştürür.

import { mapGetters } from "vuex"

export default {
  computed: {
    ...mapGetters(["completedTodos", "completedCount"])
  }
}

Neden Modüllere Ayırmalı?

Tek ve büyük bir mağazanın bakımı zorlaşır. Vuex, mağazayı her birinin kendine ait durumu, mutasyonları, eylemleri ve alıcıları olan modüllere ayırmanıza olanak tanır; böylece ilişkili mantık bir arada tutulur.

Modül Tanımlama

Modül, mağazayla aynı seçeneklere sahip basit bir nesnedir. Modülleri modules anahtarı altında kaydedersiniz.

const cart = {
  state: () => ({ items: [] }),
  mutations: {
    addItem(state, item) { state.items.push(item) }
  },
  getters: {
    itemCount: (state) => state.items.length
  }
}

Modülleri Kaydetme

Modülleri kök mağazada modules altında birleştirin. Her anahtar, modülün adı olur.

import { createStore } from "vuex"
import cart from "./modules/cart"
import user from "./modules/user"

export const store = createStore({
  modules: { cart, user }
})

Modülleri Ad Alanlarına Ayırma

Bir modülün kendine ait bir kapsamı olması için namespaced: true ayarını yapın. Bu, modüller arasındaki ad çakışmalarını önler ve yapıyı açık hâle getirir.

const cart = {
  namespaced: true,
  state: () => ({ items: [] }),
  getters: {
    itemCount: (state) => state.items.length
  }
}

Ad Alanlarına Ayrılmış Modüllere Erişme

Ad alanlarına ayırma kullanırken mutasyonları uygularken, eylemleri gönderirken veya alıcılardan veri okurken modül adını önek olarak ekleyin.

// module state lives under the module key
this.$store.state.cart.items

// namespaced getter, mutation, action
this.$store.getters["cart/itemCount"]
this.$store.commit("cart/addItem", item)
this.$store.dispatch("cart/checkout")

Kısa Kontrol

Alıcılar ve modüller hakkındaki bilginizi sınayın.

Özet

Alıcılar, durumdan önbelleğe alınmış değerler türetir ve bunlara this.$store.getters veya mapGetters üzerinden erişilir. Modüller, büyük bir mağazayı odaklanmış birimlere ayırır; namespaced: true ayarı, kapsamlarını belirler ve üyelerine module/name önekiyle erişmenizi sağlar. Artık Vuex araç setinin tamamına sahipsiniz: durum, mutasyonlar, eylemler, alıcılar ve modüller.

Sıkça Sorulan Sorular

“Getter'lar ve Modüller” dersi ücretsiz mi?

Evet — “Getter'lar ve Modüller” 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.

“Getter'lar ve Modüller” dersinde ne öğreneceğim?

Türetilmiş durumu hesaplayın ve store'u modüller hâlinde düzenleyin. 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 3. dersidir.

“Getter'lar ve Modüller” 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

← Vue Academy Sayfasına Dön