Vue reactive state

Vue's reactivity system works fundamentally differently to JavaScript's event system so uses a helper class to bridge the gap.

This example uses StateMachine and StateHelper to show how your Vue JS apps can benefit from state management:

• StateMachine sets up your navigation constraints
• StateHelper makes changes available as properties which Vue can hook into

If you look at the JavaScript, you'll see the following line:

this.state = StateMachine.helper(this.fsm).data

This creates the helper and immediately shares its data property to application's state property:

{
  "name": "a",
  "index": 0,
  "paused": false,
  "is": {
    "a": true
  },
  "actions": {
    "next": true
  },
  "states": {
    "b": true
  },
  "all": {
    "states": [
      "a",
      "b",
      "c",
      "d",
      "e"
    ],
    "actions": [
      "next",
      "back"
    ]
  }
}

If you look at the rest of the code, there is very little JavaScript needed, with all of the below driven by changes in app.state:

• The active view class, based on the is.<state> property
• The available view classes, based on the states property (not really needed, but included for completeness)
• The buttons enabled/disabled state, based on the actions property
• The disabled state of the app, based on the paused property