Vue reactive state

State A
State B
State C
State D
State E

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:

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: