Skip to content

标签

状态节点可以有标签，这些标签是帮助分组或分类状态节点的字符串术语。例如，您可以使用“loading”标签表示哪些状态节点代表正在加载数据的状态，并使用 state.hasTag(tag) 确定状态是否包含那些带标签的状态节点：

const feedbackMachine = createMachine({
  id: 'feedback',
  initial: 'prompt',
  states: {
    prompt: {
      tags: ['visible'],
      // ...
    },
    form: {
      tags: ['visible'],
      // ...
    },
    thanks: {
      tags: ['visible', 'confetti'],
      // ...
    },
    closed: {
      tags: ['hidden'],
    },
  },
});

const feedbackActor = createActor(feedbackMachine).start();

console.log(feedbackActor..getSnapshot().hasTag('visible'));
// logs true

标签和 TypeScript​

您可以在机器设置的 types.tags 属性中强类型化机器的 tags。

import { setup } from 'xstate';

const machine = setup({
  types: {
    tags: {} as 'pending' | 'success' | 'error'
  }
}).createMachine({
  // ...
  states: {
    loadingUser: {
      tags: ['pending'], // 强类型化
    },
  },
});

const actor = createActor(machine).start();

actor
  .getSnapshot()
  // 自动完成
  .hasTag('pending');