与 Vue 一起使用

If you want to use the Vue Composition API, we recommend using the following packages:

Vue follows a similar pattern to React:

  • The machine can be defined externally;
  • The service is placed on the data object;
  • State changes are observed via service.onTransition(state => ...), where you set some data property to the next state;
  • The machine’s context can be referenced as an external data store by the app. Context changes are also observed via service.onTransition(state => ...), where you set another data property to the updated context;
  • The service is started (service.start()) when the component is created();
  • Events are sent to the service via service.send(event).
  1. import { createMachine } from 'xstate';
  3. // This machine is completely decoupled from Vue
  4. export const toggleMachine = createMachine({
  5.   id: 'toggle',
  6.   context: {
  7.     /* some data */
  8.   },
  9.   initial: 'inactive',
  10.   states: {
  11.     inactive: {
  12.       on: { TOGGLE: 'active' }
  13.     },
  14.     active: {
  15.       on: { TOGGLE: 'inactive' }
  16.     }
  17.   }
  18. });
  1. <!-- Toggle.vue -->
  2. <template>
  3.   <button v-on:click="send('TOGGLE');">
  4.     {{ current.matches("inactive") ? "Off" : "On" }}
  5.   </button>
  6. </template>
  8. <script>
  9.   import { interpret } from 'xstate';
  10.   import { toggleMachine } from '../path/to/toggleMachine';
  12.   export default {
  13.     name: 'Toggle',
  14.     created() {
  15.       // Start service on component creation
  16.       this.toggleService
  17.         .onTransition((state) => {
  18.           // Update the current state component data property with the next state
  19.           this.current = state;
  20.           // Update the context component data property with the updated context
  21.           this.context = state.context;
  22.         })
  23.         .start();
  24.     },
  25.     data() {
  26.       return {
  27.         // Interpret the machine and store it in data
  28.         toggleService: interpret(toggleMachine),
  30.         // Start with the machine's initial state
  31.         current: toggleMachine.initialState,
  33.         // Start with the machine's initial context
  34.         context: toggleMachine.context
  35.       };
  36.     },
  37.     methods: {
  38.       // Send events to the service
  39.       send(event) {
  40.         this.toggleService.send(event);
  41.       }
  42.     }
  43.   };
  44. </script>