从代码导入

如果您已经在使用 XState 构建了状态机，或者使用我们较早的 Stately Viz 创建了状态机，但还没有尝试过 Stately Studio 的编辑器，那么从代码导入是很有帮助的。

观看我们的 “从代码导入” 视频在 YouTube 上 (2分24秒)。

导入状态机

在导入之前，您的状态机代码应格式化为 createMachine() 工厂函数。导入器具有基本的验证功能，以防您的状态机有基本错误，包括提醒您是否缺少 createMachine 定义。

在页面末尾查看一个可导入的机器代码示例。

警告：导入代码将覆盖您当前或选定的状态机，除非您从项目中的机器列表中创建一个新机器。

Stately 编辑器现在支持从代码导入多个状态机。

使用导入的代码在项目中创建新机器

从项目中的机器列表中创建一个 新机器，然后使用 导入 按钮将代码导入新机器。

导入代码以覆盖您的机器

使用 代码 面板中的 导入 按钮，或从编辑器菜单中选择 机器 > 导入 以覆盖您当前的机器。

机器代码示例

以下是一个 createMachine() 工厂函数的示例，您可以将其导入为机器而不会出现任何错误：

createMachine({
  id: 'Video',
  initial: 'Closed',
  description: 'Video player',
  states: {
    Closed: {
      on: {
        PLAY: {
          target: 'Opened',
        },
      },
    },
    Opened: {
      invoke: {
        src: 'startVideo',
      },
      initial: 'Playing',
      description: 'Fullscreen mode',
      states: {
        Playing: {
          on: {
            PAUSE: {
              target: 'Paused',
            },
          },
        },
        Paused: {
          on: {
            PLAY: {
              target: 'Playing',
            },
          },
        },
        Stopped: {
          type: 'final',
          after: {
            5000: {
              target: '#Video.Closed',
              actions: [],
              internal: false,
            },
          },
        },
      },
      on: {
        STOP: {
          target: '.Stopped',
        },
      },
    },
  },
  context: {},
  predictableActionArguments: true,
  preserveActionOrder: true,
});