Vue Academy · Ders

Vuex Temelleri

Vuex store'unu ve merkezi durumu anlayın.

Vuex Temelleri, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 1. 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.

Merkezi Durum Neden Gerekli?

Vue uygulamaları büyüdükçe birçok bileşen arasındaki verileri paylaşmak zorlaşır. Özellikleri aşağıya aktarmak ve olayları derin iç içe ağaçlar boyunca yukarı göndermek kırılgandır. Vuex, herhangi bir bileşenin öngörülebilir bir şekilde okuyup yazabildiği tek ve merkezi bir store ile bu sorunu çözer.

Tek Doğruluk Kaynağı

Vuex, tek yönlü veri akışını izler. Paylaşılan tüm uygulama durumu, store adı verilen tek bir yerde bulunur. Bileşenler durumu store'dan okur ve değişiklikleri denetimli bir API üzerinden ister; böylece verilerin nereden geldiğini ve nasıl değiştiğini her zaman bilirsiniz.

Vuex'i Yükleme

Vuex 4, Vue 3 için oluşturulmuş sürümdür. Paket yöneticinizle yükleyin, ardından store'u oluşturup app'e kaydedin.

npm install vuex@4

Store'u Oluşturma

Bir store tanımlamak için createStore kullanın. state seçeneği, başlangıçtaki reaktif durum nesnesini döndüren bir işlevdir.

import { createStore } from "vuex"

export const store = createStore({
  state() {
    return {
      count: 0,
      user: null
    }
  }
})

Store'u Kaydetme

Store'u app.use(store) ile app'e geçirin. Böylece store, this.$store üzerinden her bileşende kullanılabilir.

import { createApp } from "vue"
import App from "./App.vue"
import { store } from "./store"

const app = createApp(App)
app.use(store)
app.mount("#app")

State Özelliği

state nesnesi uygulama verilerinizi tutar. Reaktiftir: state değiştiğinde, onu kullanan tüm bileşenler otomatik olarak yeniden oluşturulur. Bunu tüm app'in data() işlevi gibi düşünebilirsiniz.

state() {
  return {
    todos: [],
    isLoading: false,
    theme: "light"
  }
}

Options API'de State'e Erişme

Bir bileşenin içinde store'a this.$store.state üzerinden ulaşırsınız. Bir computed özelliği değeri reaktif tutar.

export default {
  computed: {
    count() {
      return this.$store.state.count
    }
  }
}

Şablonda State Kullanma

Bir computed özelliği aracılığıyla dışa açıldıktan sonra state, şablonda herhangi bir yerel değer gibi kullanılır.

<template>
  <p>Current count: {{ count }}</p>
</template>

mapState Yardımcısı

Birçok computed özelliğini elle yazmak tekrara yol açar. mapState yardımcısı, bunları bir state adı dizisinden sizin için oluşturur.

import { mapState } from "vuex"

export default {
  computed: {
    ...mapState(["count", "user"])
  }
}

Yeniden Adlandırmayla mapState

Özellikleri yeniden adlandırmak veya state'ten türetilmiş değerler hesaplamak için mapState işlevine bir nesne geçirin.

computed: {
  ...mapState({
    total: "count",
    userName: (state) => state.user ? state.user.name : "Guest"
  })
}

Composition API'de State'e Erişme

Composition API ile store örneğini almak için setup içinde useStore() işlevini çağırın, ardından state'i bir computed özelliği üzerinden okuyun.

import { computed } from "vue"
import { useStore } from "vuex"

export default {
  setup() {
    const store = useStore()
    const count = computed(() => store.state.count)
    return { count }
  }
}

Hızlı Kontrol

Vuex temelleri hakkındaki anlayışınızı sınayın.

Özet

Vuex, tek doğruluk kaynağı olarak merkezi ve reaktif bir store sağlar. Onu createStore ile oluşturur, app.use aracılığıyla kaydeder ve state değerini computed özellikleri veya mapState yardımcısı üzerinden okursunuz. Composition API'de store'a useStore() ile ulaşırsınız. Sırada, bu durumu güvenli bir şekilde nasıl değiştireceğinizi öğreneceksiniz.

Sıkça Sorulan Sorular

“Vuex Temelleri” dersi ücretsiz mi?

Evet — “Vuex Temelleri” 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.

“Vuex Temelleri” dersinde ne öğreneceğim?

Vuex store'unu ve merkezi durumu anlayın. 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 1. dersidir.

“Vuex Temelleri” 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