0Pricing
Vue Academy · 课时

在 Vue 中使用 XState 构建状态机

使用 XState v5 的 useMachine()、定义状态与转换，以及在 DevTools 中可视化状态机

在 Vue 中使用 XState 构建状态机 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 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" } },
  },
})

在 Vue 中使用 useMachine

@xstate/vue 中的 useMachine 会在组件内运行状态机，并返回响应式的 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 检查器会渲染实时状态机、突出显示当前状态，并允许您重放状态转换——这对于理解复杂流程非常有价值。

快速检查

检查您对 Vue 中 XState 的理解。

回顾

您学会了使用 XState 的状态机：

  • 状态机通过定义有限状态和允许的转换，使无效状态不可能出现。
  • createMachine 使用 on 定义带有事件到目标状态转换的 states。
  • 来自 @xstate/vue 的 useMachine 会返回响应式的 snapshot 和 send。
  • 使用 snapshot.matches("...") 读取状态；使用 send({ type }) 触发状态转换。
  • context 用于携带额外数据；XState 开发者工具可以将状态机可视化。

常见问题解答

「在 Vue 中使用 XState 构建状态机」课时是免费的吗？

是的 — 「在 Vue 中使用 XState 构建状态机」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「在 Vue 中使用 XState 构建状态机」这节课中我会学到什么？

使用 XState v5 的 useMachine()、定义状态与转换，以及在 DevTools 中可视化状态机 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「在 Vue 中使用 XState 构建状态机」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 高级响应式：shallowRef 与 triggerRef
  2. 组合式函数工厂与参数化组合式函数
  3. 在 Vue 中使用 XState 构建状态机
  4. 使用 effectScope 管理分组副作用
← 返回 Vue Academy