Skip to content

@xstate/svelte

@xstate/svelte 包 包含了在 Svelte 中使用 XState 的工具。

模板​

使用以下模板可以快速开始使用 XState 和 Svelte：

安装​

安装最新版本的 xstate 和 @xstate/svelte。xstate 是 @xstate/svelte 的一个 peer 依赖。

npm install xstate @xstate/svelte

API​

useMachine(machine, options?)​

一个函数，用于从给定的 machine 创建一个 actor，并启动一个在组件生命周期内运行的 actor。

参数

  • machine - 一个 XState 机器。
  • options (可选) - Actor 选项

返回 { snapshot, send, actorRef}:

  • snapshot - 一个表示机器当前状态的 Svelte store
  • send - 一个向运行中的 actor ref 发送事件的函数。
  • actorRef - 创建的 actor ref。

useSelector(actorRef, selector, compare?, getSnapshot?)​

一个函数，返回一个表示从 actorRef 的快照中选择的值的 Svelte store。只有当所选值发生变化时，store 才会更新，这由可选的 compare 函数确定。

参数

  • actorRef - 一个 actor ref
  • selector - 一个函数，接受 actor 的当前状态 (snapshot) 作为参数，并返回所需的选定值。
  • compare (可选) - 一个函数，用于确定当前选定值是否与之前的选定值相同。

示例​

即将推出

匹配状态​

当使用 分层 和 并行 机器时，状态值将是对象，而不是字符串。在这种情况下，最好使用 state.matches(...)。

{#if $state.matches('idle')}
  //
{:else if $state.matches({ loading: 'user' })}
  //
{:else if $state.matches({ loading: 'friends' })}
  //
{/if}

持久化和恢复状态​

您可以通过 options.snapshot 使用 useMachine(...) 持久化和恢复状态：

// 从某处获取持久化的状态配置对象，例如 localStorage
const persistedState = JSON.parse(
  localStorage.getItem('some-persisted-state-key'),
);

const { snapshot, send } = useMachine(someMachine, {
  snapshot: persistedState,
});

// 状态将最初是持久化的状态，而不是机器的 initialState