与 Svelte 一起使用

XState integrates great with Svelte, and especially Svelte stores!

The only gotcha is that you’ll need this extra package.

  1. npm install @rollup/plugin-replace --save-dev

Import the new package in rollup.config.js

  1. import replace from '@rollup/plugin-replace';

Then add this to the plugins array in rollup.config.js.

  1. replace({
  2.   'process.env.NODE_ENV': process.env.NODE_ENV
  3. });

machine.js

  1. import { createMachine } from 'xstate';
  3. // This machine is completely decoupled from Svelte
  4. export const toggleMachine = createMachine({
  5.   id: 'toggle',
  6.   initial: 'inactive',
  7.   states: {
  8.     inactive: {
  9.       on: { TOGGLE: 'active' }
  10.     },
  11.     active: {
  12.       on: { TOGGLE: 'inactive' }
  13.     }
  14.   }
  15. });

App.svelte - Standard usage

  1. <script>
  2.     import {interpret} from 'xstate';
  3.     import {toggleMachine} from './machine';
  5.     let current;
  7.     const toggleService = interpret(toggleMachine)
  8.         .onTransition((state) => {
  9.             current = state;
  10.         }).start()
  11. </script>
  13. <button on:click={() => toggleService.send('TOGGLE')}>
  14.     {current.matches('inactive') ? 'Off' : 'On'}
  15. </button>

App.svelte - Store usage

The toggleService has a .subscribe function that is similar to Svelte stores, so it can be used as a readable store.

  1. <script>
  2.     import {interpret} from 'xstate';
  3.     import {toggleMachine} from './machine';
  5.     const toggleService = interpret(toggleMachine).start();
  6. </script>
  8. <button on:click={() => toggleService.send('TOGGLE')}>
  9.     {$toggleService.matches('inactive') ? 'Off' : 'On'}
  10. </button>

If you’re not familiar with the ‘\$’ syntax, it basically just reads the value of a store.