Vue Academy · درس

آلات الحالة باستخدام XState في Vue

‏useMachine() مع XState v5، وتعريف الحالات والانتقالات، وتصوير الآلة في devtools

آلات الحالة باستخدام XState في Vue درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

لماذا نستخدم آلات الحالات؟

قد تنجرف العلامات المنطقية مثل isLoading وisError وisSuccess إلى تركيبات مستحيلة. تمثّل آلة الحالات مجموعة محدودة من الحالات والانتقالات المسموح بها بينها، مما يجعل الحالات غير الصالحة غير قابلة للتمثيل.

مقدمة إلى XState

إن XState مكتبة لآلات الحالات المحدودة ومخططات الحالات في JavaScript. تدمج حزمة @xstate/vue هذه المكتبة مع تفاعلية Vue عبر دالة composable.

// 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>

السياق للبيانات الإضافية

يمكن للآلات الاحتفاظ بـ context، أي بيانات موسّعة مثل النتائج التي جُلبت أو رسائل الخطأ، وتُحدَّث بواسطة الإجراءات أثناء الانتقالات. تظل الحالة محدودة، بينما يحتفظ السياق بالبيانات المتغيرة.

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

التصوير المرئي باستخدام أدوات المطور

يمكن تصوير آلات XState على شكل مخططات. تعرض أدوات مطوري XState / Stately inspector الآلة الحية، وتبرز الحالة الحالية، وتتيح إعادة تشغيل الانتقالات، وهو أمر بالغ القيمة لفهم التدفقات المعقدة.

تحقق سريع

تحققوا من فهمكم لـ XState في Vue.

مراجعة

لقد تعلمتم آلات الحالات باستخدام XState:

تجعل آلات الحالات الحالات غير الصالحة مستحيلة من خلال تعريف حالات محدودة وانتقالات مسموح بها.
تعرّف createMachine كائن states مع انتقالات من الأحداث إلى الأهداف باستخدام on.
تعيد useMachine من @xstate/vue كائن snapshot تفاعليًا ودالة send.
اقرؤوا الحالة باستخدام snapshot.matches("...")، وشغّلوا الانتقالات باستخدام send({ type }).
يحمل context البيانات الإضافية، بينما تصوّر أدوات مطوري XState الآلة.

الأسئلة الشائعة

هل درس «آلات الحالة باستخدام XState في Vue» مجاني؟

نعم — نص درس «آلات الحالة باستخدام XState في Vue» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «آلات الحالة باستخدام XState في Vue»؟

‏useMachine() مع XState v5، وتعريف الحالات والانتقالات، وتصوير الآلة في devtools تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «آلات الحالة باستخدام XState في Vue»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

التفاعلية المتقدمة: shallowRef وtriggerRef
مصانع Composables وComposables ذات المعلمات
آلات الحالة باستخدام XState في Vue
‏effectScope للتأثيرات المجمّعة

← العودة إلى Vue Academy