Store allows you to save and share data between the components in your application.

import store from 'akili/src/services/store';
console.log(store === Akili.services.store); // true

store is a javascript Proxy object. So you can just change the property anywhere and anytime you need and it will trigger all the necessary changes.

store.currentUser = { name: 'Nick' };

Nested properties can be changed as well to trigger the event. But in your component you can subscribe only for the root property.

class FirstComponent extends Akili.Component {
  compiled() {
    setTimeout(() => {
      store.currentUser.name = 'Alex';
    }, 2000);
  }
}

class SecondComponent extends Akili.Component {
  compiled() {
    this.store('currentUser', user => this.scope.user = user);
  }
}

<second-component>${ this.user.name }</second-component>

At start, it is Nick. In two seconds it will be Alex.

Link with the scope

class FirstComponent extends Akili.Component {
  compiled() {
    this.store('currentUserName', 'userInFirst');

    setTimeout(() => {
      this.scope.userInFirst = 'Bill';
    }, 2000);
  }
}

class SecondComponent extends Akili.Component {
  compiled() {
    this.store('currentUserName', 'userInSecond');

    setTimeout(() => {
      this.scope.userInSecond = 'Alex';
    }, 4000);
  }
}

<first-component>${ this.userInFirst }</first-component>
<second-component>${ this.userInSecond }</second-component>

At the beginning, it is undefined inside the elements above. In two seconds it will be Bill in both of the components. When userInFirst property is changed it changes the store property currentUserName that changes userInSecond property. It's like a double binding. You associate the scope property with the store property. In four seconds it will be the same thing, but in the opposite direction and we can see Alex inside the both elements.

If you want to create a link with the nested scope property then specify the keys as an array.

class FirstComponent extends Akili.Component {
  compiled() {
    this.store('currentUserName', ['user', 'name']); // this.scope.user.name
  }
}

To get any change just pass a callback without the key.

class SecondComponent extends Akili.Component {
  compiled() {
    this.store((val, key) => {
      if(key == 'currentUserName') {
        this.scope.userInSecond = val;
      }
    });
  }
}

The function options are the same as attribute options.