XState 中文网

# SCXML

这些 XState v4 文档不再维护

XState v5 现已推出！阅读有关 XState v5 的更多信息 (opens new window) 和 查看 XState v5 文档 (opens new window)。

¥XState v5 is out now! Read more about XState v5 (opens new window) and check out the XState v5 docs (opens new window).

XState 与 SCXML（状态图 XML：控制抽象的状态机表示法）规范 (opens new window) 兼容。此页面包含有关我们的 API 与 SCXML 规范相关的详细信息。

¥XState is compatible with the SCXML (State Chart XML: State Machine Notation for Control Abstraction) specification (opens new window). This page contains details on where our API relates to the SCXML specification.

# 事件

¥Events

SCXML 中的事件包含与事件源相关的信息，并且具有与 XState 中的事件对象不同的架构。在内部，事件对象被转换为 SCXML 事件以实现兼容性。

¥Events in SCXML contain information relevant to the source of the event, and have a different schema than event objects in XState. Internally, event objects are converted to SCXML events for compatibility.

SCXML 事件包括：

¥SCXML events include:

  • name - 给出事件名称的字符串。name 相当于 XState 事件的 .type 属性。

    ¥name - a character string giving the name of the event. name is equivalent to the .type property of an XState event.

  • type - 事件类型：'platform'、'external' 或 'internal'。

    ¥type - the event type: 'platform', 'external', or 'internal'.

    • platform 事件由平台本身引发，例如错误事件。

      ¥platform events are raised by the platform itself, such as error events.

    • internal 事件由 raise(...) 操作或 send(...) 操作与 target: '_internal' 引发。

      ¥internal events are raised by raise(...) actions or by send(...) actions with target: '_internal'.

    • external 事件描述所有其他事件。

      ¥external events describe all other events.

  • sendid - 触发 send(...) 动作的发送 ID。

    ¥sendid - the send ID of the triggering send(...) action.

  • origin - 一个字符串，允许该事件的接收者将响应事件发送回原点。

    ¥origin - a string that allows the receiver of this event to send(...) a response event back to the origin.

  • origintype - 与 origin 一起使用

    ¥origintype - used with origin

  • invokeid - 触发子服务的调用的调用 ID。

    ¥invokeid - the invoke ID of the invocation that triggered the child service.

  • data - 发送实体选择包含在此事件中的任何数据。data 相当于 XState 事件对象。

    ¥data - any data that the sending entity chose to include with this event. data is equivalent to an XState event object.

所有 XState 事件的 SCXML 事件形式都存在于操作和防护元对象的 _event 属性中，作为第三个参数：

¥The SCXML event form of all XState events is present in the _event property of action and guard meta objects, as the third argument:




 
 



 
 





// ...
{
  actions: {
    someAction: (context, event, { _event }) => {
      console.log(_event); // SCXML event
    };
  },
  guards: {
    someGuard: (context, event, { _event }) => {
      console.log(_event); // SCXML event
    }
  }
}
// ..

# 转场

¥Transitions

在状态节点的 on: { ... } 属性上定义的事件目标映射与 SCXML <transition> 元素同义：

¥The event-target mappings defined on the on: { ... } property of state nodes is synonymous to the SCXML <transition> element:

{
  green: {
    on: {
      TIMER: {
        target: '#yellow',
        cond: context => context.timeElapsed > 5000
      },
      POWER_OUTAGE: { target: '#red.flashing' }
    }
  },
  // ...
}

<state id="green">
  <transition
    event="TIMER"
    target="yellow"
    cond="timeElapsed > 5000"
  />
  <transition
    event="POWER_OUTAGE"
    target="red.flashing"
  />
</state>

# 守卫

¥Guards

cond 属性相当于 SCXML <transition> 元素上的 cond 属性：

¥The cond property is equivalent to the cond attribute on the SCXML <transition> element:

{
  on: {
    e: {
      target: 'foo',
      cond: context => context.x === 1
    }
  }
}

<transition event="e" cond="x == 1" target="foo" />

同样，in 属性等价于 In() 谓词：

¥Similarly, the in property is equivalent to the In() predicate:

{
  on: {
    e: {
      target: 'cooking',
      in: '#closed'
    }
  }
}

<transition cond="In('closed')" target="cooking"/>

# 状态 ID

¥State IDs

ID 对应于 SCXML 规范中 ID 的定义：

¥IDs correspond to the definition of IDs in the SCXML spec:

{
  green: {
    id: 'lightGreen';
  }
}

<state id="lightGreen">
  <!-- ... -->
</state>

# 行动

¥Actions

转换中的可执行操作相当于 SCXML <script> 元素。entry 和 exit 属性分别相当于 <onentry> 和 <onexit> 元素。

¥Executable actions in transitions are equivalent to the SCXML <script> element. The entry and exit properties are equivalent to the <onentry> and <onexit> elements, respectively.

{
  start: {
    entry: 'showStartScreen',
    exit: 'logScreenChange',
    on: {
      STOP: {
        target: 'stop',
        actions: ['logStop', 'stopEverything']
      }
    }
  }
}

<state id="start">
  <onentry>
    <script>showStartScreen();</script>
  </onentry>
  <onexit>
    <script>logScreenChange();</script>
  </onexit>
  <transition event="STOP" target="stop">
    <script>logStop();</script>
    <script>stopEverything();</script>
  </transition>
</state>

# 调用

¥Invoke

invoke 属性与 SCXML <invoke> 元素同义：

¥The invoke property is synonymous to the SCXML <invoke> element:

// XState
{
  loading: {
    invoke: {
      src: 'someSource',
      id: 'someID',
      autoForward: true, // currently for machines only!
      onDone: 'success',
      onError: 'failure'
    }
  }
}

<!-- SCXML -->
<state id="loading">
  <invoke id="someID" src="someSource" autoforward />
  <transition event="done.invoke.someID" target="success" />
  <transition event="error.platform" cond="_event.src === 'someID'" target="failure" />
</state>

← Reddit API →