Overview

Published: September 03, 2019
Edited: October 18, 2019

The state machine is the main attraction in the Lightning Framework. It allows you to easily keep track of what your application is doing at a certain state, and keeps your code overview neat and consistent.

Setting up the state machine

Lighting uses states to set the current "status" your application is in. We start with defining the state machine itself, as shown below:

static _states() {
    return [
    ]
}

Now we have our state machine, we can start filling it with states. States are class objects.

static _states() {
    return [
        class MyFirstState extends this {
                              
        }
    ]
}

Default state functions inside vs outside of states

States can overwrite default component behaviour, as shown below:

_handleEnter(){
    // I am triggered when you press enter
}

static _states() {
    return [
        class MyFirstState extends this {
            _handleEnter() {
                // overwrites root function when we are on this state
            }
        }
    ]
}