Vue Academy · บทเรียน

เครื่องสถานะด้วย XState ใน Vue

useMachine() กับ XState v5 การกำหนดสถานะและการเปลี่ยนสถานะ และการแสดงภาพเครื่องใน DevTools

เครื่องสถานะด้วย XState ใน Vue เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงใช้เครื่องจักรสถานะ

แฟล็กบูลีนอย่าง isLoading, isError และ isSuccess อาจเปลี่ยนไปเป็นชุดค่าที่เป็นไปไม่ได้ เครื่องจักรสถานะจะจำลองชุดสถานะที่มีจำนวนจำกัดและการเปลี่ยนสถานะที่อนุญาตระหว่างสถานะเหล่านั้น ทำให้ไม่สามารถแสดงสถานะที่ไม่ถูกต้องได้

แนะนำ XState

XState คือไลบรารีสำหรับเครื่องจักรสถานะจำกัดและแผนภูมิสถานะใน JavaScript แพ็กเกจ @xstate/vue ผสานการทำงานนี้เข้ากับระบบตอบสนองของ Vue ผ่านคอมโพสิเบิล

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

การกำหนดเครื่องจักร

createMachine ใช้อธิบายสถานะและการเปลี่ยนสถานะ แต่ละสถานะจะแสดงเหตุการณ์ภายใต้ on ซึ่งใช้เปลี่ยนไปยังสถานะเป้าหมาย

import { createMachine } from "xstate"

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

สถานะและการเปลี่ยนสถานะ

เครื่องจักรจะเริ่มต้นที่ initial การส่งเหตุการณ์ที่มีชื่ออยู่ภายใต้ on ของสถานะปัจจุบันจะเปลี่ยนไปยังเป้าหมายที่ระบุ เหตุการณ์ที่ไม่ได้อยู่ในรายการจะถูกเพิกเฉย ดังนั้นการเปลี่ยนสถานะที่ไม่ถูกต้องจึงเกิดขึ้นไม่ได้

เครื่องจักรสำหรับดึงข้อมูล

เครื่องจักรสถานะเหมาะอย่างยิ่งกับลำดับการทำงานแบบอะซิงโครนัส การดึงข้อมูลมีสถานะที่ชัดเจน ได้แก่ ว่าง กำลังโหลด สำเร็จ และล้มเหลว โดยแต่ละสถานะมีการเปลี่ยนสถานะที่สมเหตุสมผล

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

useMachine ใน Vue

useMachine จาก @xstate/vue จะเรียกใช้เครื่องจักรภายในคอมโพเนนต์ และคืนค่า snapshot แบบตอบสนองกับฟังก์ชัน send

import { useMachine } from "@xstate/vue"

const { snapshot, send } = useMachine(fetchMachine)

การอ่านสถานะปัจจุบัน

snapshot แบบตอบสนองจะเก็บสถานะปัจจุบันไว้ ตรวจสอบสถานะได้ด้วย snapshot.value.matches("loading") ซึ่งเหมาะอย่างยิ่งสำหรับการแสดงผลตามเงื่อนไข

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

การส่งเหตุการณ์

กระตุ้นการเปลี่ยนสถานะโดยเรียกใช้ send พร้อมเหตุการณ์ เครื่องจักรจะเปลี่ยนไปยังสถานะถัดไปก็ต่อเมื่อมีการกำหนดการเปลี่ยนสถานะนั้นไว้สำหรับสถานะปัจจุบัน

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

การเชื่อมเหตุการณ์ในแม่แบบ

ผูกการกระทำของส่วนติดต่อผู้ใช้เข้ากับ send เครื่องจักรสถานะจะรับประกันว่าปุ่มจะดำเนินลำดับการทำงานต่อไปในวิธีที่ถูกต้องเท่านั้น

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

บริบทสำหรับข้อมูลเพิ่มเติม

เครื่องจักรสามารถเก็บบริบท ซึ่งเป็นข้อมูลเพิ่มเติม เช่น ผลลัพธ์ที่ดึงมาแล้วหรือข้อความข้อผิดพลาด และอัปเดตข้อมูลนี้ด้วยการกระทำระหว่างการเปลี่ยนสถานะ สถานะยังคงมีจำนวนจำกัด ขณะที่บริบทเก็บข้อมูลที่เปลี่ยนแปลงได้

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

การแสดงภาพด้วยเครื่องมือสำหรับนักพัฒนา

เครื่องจักร XState สามารถแสดงเป็นแผนภาพได้ เครื่องมือสำหรับนักพัฒนา XState / ตัวตรวจสอบ Stately จะแสดงเครื่องจักรที่กำลังทำงาน ไฮไลต์สถานะปัจจุบัน และให้คุณเล่นการเปลี่ยนสถานะซ้ำได้ จึงมีประโยชน์อย่างมากต่อการทำความเข้าใจลำดับการทำงานที่ซับซ้อน

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ตรวจสอบความเข้าใจของคุณเกี่ยวกับ XState ใน Vue

สรุปทบทวน

คุณได้เรียนรู้เครื่องจักรสถานะด้วย XState ดังนี้:

เครื่องจักรสถานะทำให้สถานะที่ไม่ถูกต้องเกิดขึ้นไม่ได้ โดยกำหนดสถานะที่มีจำนวนจำกัดและการเปลี่ยนสถานะที่อนุญาต
createMachine ประกาศ states พร้อมการเปลี่ยนจากเหตุการณ์ไปยังเป้าหมายด้วย on
useMachine จาก @xstate/vue คืนค่า snapshot แบบตอบสนองและ send
อ่านสถานะด้วย snapshot.matches("...") และกระตุ้นการเปลี่ยนสถานะด้วย send({ type })
context ใช้เก็บข้อมูลเพิ่มเติม ส่วนเครื่องมือสำหรับนักพัฒนา XState ใช้แสดงภาพเครื่องจักร

คำถามที่พบบ่อย

บทเรียน “เครื่องสถานะด้วย XState ใน Vue” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เครื่องสถานะด้วย XState ใน Vue” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เครื่องสถานะด้วย XState ใน Vue”

useMachine() กับ XState v5 การกำหนดสถานะและการเปลี่ยนสถานะ และการแสดงภาพเครื่องใน DevTools คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “เครื่องสถานะด้วย XState ใน Vue” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

รีแอกทีฟขั้นสูง: shallowRef และ triggerRef
โรงงานคอมโพสิเบิลและคอมโพสิเบิลแบบรับพารามิเตอร์
เครื่องสถานะด้วย XState ใน Vue
effectScope สำหรับเอฟเฟกต์แบบกลุ่ม

← กลับไปที่ Vue Academy