Store

The component store is a Map object declared locally in the component itself as a class property. Components can view, set and get data in their store and also get data from another component.

tip

The store is accessible in the whole context of the Component class, including the lifecycle hooks.

Properties

Store

View the contents of the component store.

Signature

type store = Map<string, object>

Example

src/components/home.js

class Home extends Component {
  constructor(props) {
    super(props);

    console.log(this.store);
  }
}

Methods​

Set store

Add data to the component store.

info

When the key already exist in the Map object, Costro will perform a deep cloning of the data.

Signature

setStore(data: object): void

Parameters

Parameter	Type	Description
data	object	The data to add to the store. Each key will be added associated with its value.

Example

src/components/home.js

class Home extends Component {
  constructor(props) {
    super(props);

    this.setStore({
      name: 'John Doe'
    });
  }
}

The value of the Map objecrt of the component store will be:

Map(1) {"name" => "John Doe"}

Get store

Get the data associated with the key from the component store. If the optional path parameter is specified, the data is extracted from the component associated with the path.

Signature

getStore(key: string, path?: string)

Parameters

Parameter	Type	Description
key	string	The key of the data to search in the store
path	string	(Optional) The path of the external component. It must correspond to a valid route path (associated with a component)

Returns

The data associated to the key.

Examples

src/components/home.js

class Home extends Component {
  constructor(props) {
    super(props);

    // The "name" key in the component store
    this.getStore('name');

    // The "name" key in the external component "/about"
    this.getStore('name', '/about');
  }
}

Try it on CodeSandbox.