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:

{{ $data.state }}

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