Skip to content

States

Machine body

The body of the machine is an object with two required keys: "states" and "initial".

States, as the name suggests, are used for defining states. The states are objects that contain functions called actions. It's very similar to the Pinia syntax. The initial is a string for specifying which state should be loaded initially.

typescript
const machine =  createMachine('agreement', {
  initial: "INITIAL",
  state: {
    INITIAL: {
      agree(name: string) {
        this.$changeState('AGREED')
      }
    },
    AGREED: {
      goBack() {
        this.$changeState('INITIAL')
      }
    }
  }
})

Getting reactive state

Under machine.current is a reactive shallow ref with current machine state can be accessed. In the above example, the value is "INITIAL"

typescript
machine.current.value // "INITIAL" | "AGREED"

State transitions

There are two ways of transitioning to a different state.

We can use $changeState('STATE_KEY') from action context object.

typescript
createMachine('agreement', {
  initial: "INITIAL",
  state: {
    INITIAL: {
      action(name: string) {
        this.$changeState('AGREED')
      }
    },
    AGREED: {
      /* ... */
    }
  }
})

or directly call changeState('STATE_KEY') on machine.

typescript
machine.changeState('AGREED')
machine.current.value // "AGREED"