Vue Academy · Ders

Vue'da XState ile Durum Makineleri

XState v5 ile useMachine(), durumları ve geçişleri tanımlama, makineyi DevTools'ta görselleştirme.

Vue'da XState ile Durum Makineleri, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 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 4 dersten oluşur.

State Makineleri Neden Kullanılır

isLoading, isError, isSuccess gibi Boole bayrakları, imkânsız birleşimlere sürüklenebilir. Bir state makinesi, sonlu bir state kümesini ve bunlar arasındaki izin verilen geçişleri modeller; böylece geçersiz state'lerin temsil edilmesi mümkün olmaz.

XState'e Giriş

XState, JavaScript'te sonlu state makineleri ve state şemaları için bir kitaplıktır. @xstate/vue paketi, onu birleştirilebilir işlev aracılığıyla Vue'nun reaktivitesiyle bütünleştirir.

// terminal
// npm install xstate @xstate/vue

Makine Tanımlama

createMachine, state'leri ve geçişleri tanımlar. Her state, hedef bir state'e geçiş sağlayan olayları on altında listeler.

import { createMachine } from "xstate"

const toggleMachine = createMachine({
  id: "toggle",
  initial: "inactive",
  states: {
    inactive: { on: { TOGGLE: "active" } },
    active: { on: { TOGGLE: "inactive" } },
  },
})

State'ler ve Geçişler

Makine initial state'inde başlar. Geçerli state'in on altında tanımlanan adı taşıyan bir olay gönderildiğinde, belirtilen hedefe geçiş yapılır. Listelenmeyen olaylar yalnızca yok sayılır — geçersiz geçişler gerçekleşemez.

Bir Veri Getirme Makinesi

State makineleri eşzamansız akışlarda özellikle etkilidir. Veri getirme işleminin belirgin state'leri vardır: boşta, yükleniyor, başarılı ve başarısız — her biri mantıklı geçişlere sahiptir.

const fetchMachine = createMachine({
  initial: "idle",
  states: {
    idle: { on: { FETCH: "loading" } },
    loading: { on: { RESOLVE: "success", REJECT: "failure" } },
    success: {},
    failure: { on: { RETRY: "loading" } },
  },
})

Vue'da <code>useMachine</code>

@xstate/vue içindeki useMachine, makineyi bir bileşenin içinde çalıştırır ve reaktif bir snapshot ile bir send işlevi döndürür.

import { useMachine } from "@xstate/vue"

const { snapshot, send } = useMachine(fetchMachine)

Geçerli State'i Okuma

Reaktif snapshot, geçerli state'i tutar. snapshot.value.matches("loading") ile kontrol ediniz — koşullu oluşturma için idealdir.

// template
// <Spinner v-if="snapshot.matches('loading')" />
// <Error v-if="snapshot.matches('failure')" />
console.log(snapshot.value.value) // "idle"

Olay Gönderme

Bir olayla send işlevini çağırarak geçişleri tetikleyiniz. Makine, yalnızca geçiş geçerli state için tanımlanmışsa bir sonraki state'e geçer.

function load() {
  send({ type: "FETCH" })
}
// later, on resolve:
// send({ type: "RESOLVE" })

Şablondaki Olayları Bağlama

Kullanıcı arayüzü eylemlerini send işlevine bağlayınız. State makinesi, düğmenin akışı yalnızca geçerli yollarla ilerletmesini garanti eder.

<template>
  <button @click="send({ type: 'FETCH' })">Load</button>
  <button v-if="snapshot.matches('failure')" @click="send({ type: 'RETRY' })">
    Retry
  </button>
</template>

Ek Veriler İçin Bağlam

Makineler bağlam taşıyabilir — veri getirme sonuçları veya hata iletileri gibi genişletilmiş veriler, geçişler sırasında eylemler tarafından güncellenir. State sonlu kalırken bağlam değişken verileri tutar.

createMachine({
  context: { data: null, error: null },
  initial: "idle",
  states: { /* assign to context in transitions */ },
})

Geliştirici Araçlarıyla Görselleştirme

XState makineleri diyagram olarak görselleştirilebilir. XState geliştirici araçları / Stately inceleyicisi çalışan makineyi görüntüler, geçerli state'i vurgular ve geçişleri yeniden oynatmanıza olanak tanır — karmaşık akışları anlamak için son derece değerlidir.

Hızlı Kontrol

Vue'da XState konusundaki anlayışınızı kontrol ediniz.

Özet

XState ile state makinelerini öğrendiniz:

State makineleri, sonlu state'leri ve izin verilen geçişleri tanımlayarak geçersiz state'leri imkânsız kılar.
createMachine, on olaydan hedefe geçişleri içeren states tanımını yapar.
@xstate/vue içindeki useMachine, reaktif bir snapshot ve send döndürür.
State'i snapshot.matches("...") ile okuyun; geçişleri send({ type }) ile tetikleyin.
context ek verileri taşır; XState geliştirici araçları makineyi görselleştirir.

Sıkça Sorulan Sorular

“Vue'da XState ile Durum Makineleri” dersi ücretsiz mi?

Evet — “Vue'da XState ile Durum Makineleri” 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 4 dersten oluşur.

“Vue'da XState ile Durum Makineleri” dersinde ne öğreneceğim?

XState v5 ile useMachine(), durumları ve geçişleri tanımlama, makineyi DevTools'ta görselleştirme. 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, 4 dersinin 3. dersidir.

“Vue'da XState ile Durum Makineleri” 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

İleri Düzey Reaktivite: shallowRef ve triggerRef
Composable Fabrikaları ve Parametreli Composable'lar
Vue'da XState ile Durum Makineleri
Gruplandırılmış Etkiler için effectScope

← Vue Academy Sayfasına Dön