Vue Academy · Pelajaran

State Machine dengan XState di Vue

useMachine() dengan XState v5, mendefinisikan state dan transisi, serta memvisualisasikan machine di DevTools.

State Machine dengan XState di Vue adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Mengapa Menggunakan Mesin State

Penanda logika seperti isLoading, isError, dan isSuccess dapat berkembang menjadi kombinasi yang mustahil. Mesin state memodelkan sejumlah state terbatas beserta transisi yang diizinkan di antaranya, sehingga state yang tidak valid tidak dapat direpresentasikan.

Memperkenalkan XState

XState adalah pustaka untuk mesin state terbatas dan diagram state dalam JavaScript. Paket @xstate/vue mengintegrasikannya dengan reaktivitas Vue melalui sebuah komposabel.

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

Mendefinisikan Mesin

createMachine menjelaskan status dan transisi. Setiap status mencantumkan peristiwa di bawah on yang mengarah ke status tujuan.

import { createMachine } from "xstate"

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

Status dan Transisi

Mesin dimulai pada initial. Mengirim peristiwa yang tercantum di bawah on pada state saat ini akan beralih ke tujuan yang disebutkan. Peristiwa yang tidak tercantum akan diabaikan — transisi yang tidak valid tidak dapat terjadi.

Mesin Pengambilan Data

Mesin state sangat berguna untuk alur asinkron. Pengambilan data memiliki status yang jelas: tidak aktif, memuat, berhasil, dan gagal — masing-masing dengan transisi yang masuk akal.

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

useMachine di Vue

useMachine dari @xstate/vue menjalankan mesin di dalam komponen dan mengembalikan snapshot reaktif serta fungsi send.

import { useMachine } from "@xstate/vue"

const { snapshot, send } = useMachine(fetchMachine)

Membaca State Saat Ini

snapshot reaktif menyimpan state saat ini. Periksa dengan snapshot.value.matches("loading") — sangat cocok untuk perenderan bersyarat.

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

Mengirim Peristiwa

Picu transisi dengan memanggil send menggunakan sebuah peristiwa. Mesin hanya berpindah ke state berikutnya jika transisi tersebut ditentukan untuk state saat ini.

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

Menghubungkan Peristiwa di Templat

Ikat tindakan antarmuka ke send. Mesin state menjamin bahwa tombol hanya memajukan alur dengan cara yang valid.

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

Konteks untuk Data Tambahan

Mesin dapat membawa konteks — data tambahan seperti hasil pengambilan data atau pesan kesalahan — yang diperbarui oleh tindakan selama transisi. State tetap terbatas, sementara konteks menyimpan data yang berubah.

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

Memvisualisasikan dengan Alat Pengembang

Mesin XState dapat divisualisasikan sebagai diagram. Alat pengembang XState / inspektur Stately merender mesin yang sedang berjalan, menyoroti state saat ini, dan memungkinkan Anda memutar ulang transisi — sangat berharga untuk memahami alur yang kompleks.

Pemeriksaan Singkat

Periksa pemahaman Anda tentang XState di Vue.

Ringkasan

Anda telah mempelajari mesin state dengan XState:

Mesin state membuat state yang tidak valid mustahil terjadi dengan mendefinisikan state terbatas dan transisi yang diizinkan.
createMachine mendeklarasikan states dengan transisi peristiwa-ke-tujuan melalui on.
useMachine dari @xstate/vue mengembalikan snapshot dan send yang reaktif.
Baca state dengan snapshot.matches("..."); picu transisi dengan send({ type }).
context membawa data tambahan; alat pengembang XState memvisualisasikan mesin.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “State Machine dengan XState di Vue” gratis?

Ya — teks lengkap “State Machine dengan XState di Vue” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “State Machine dengan XState di Vue”?

useMachine() dengan XState v5, mendefinisikan state dan transisi, serta memvisualisasikan machine di DevTools. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “State Machine dengan XState di Vue” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Reaktivitas Lanjutan: shallowRef dan triggerRef
Factory Composable dan Composable Berparameter
State Machine dengan XState di Vue
effectScope untuk Effect yang Dikelompokkan

← Kembali ke Vue Academy