Global store

If you want to pass data between multiple controllers, you can use the GreenLight store that was created on the init phase. To access it, you can use the following:

GreenLight.$globalStore.get();

Global store object

To bind your elements to the global store, you need to use the $g object in your markup like this:

<p gl-bind="$g.globalVariableName"></p>

NOTE: Global store doesn't support 2 way binding and will throw a warning if you try to bind a value to an input element ( if other binding properties are not specified )

Detect changes

Also, you can react to changes on the global store by using the onChange method provided:

GreenLight.$globalStore.onChange((keyChanged) => {
  // Here you put the code you want to execute on change.
});

keyChanged represents the name of the variable that has changed in the global store.

Store effects

This is similar to the onChange method but it only reacts to changes on variables passed in the dependencies array. Here is an example:

GreenLight.$globalStore.effect(() => {
  // This will run only if the isUserConnected variable changed.
}, ["isUserConnected"]);

How it works internally

As of any effect in this library, it utilizes a debounce strategy to batch changes together and only call the effect one time if multiple variables have changed at once.