Shared stores

Use a store when several parts of your page need the same data, such as a cart or signed-in session. Sharing is explicit: you choose the values and the apps that receive them.

Register and read a store

One app’s mounted roots share app.state. For named stores that must be accessible regardless of local data or component boundaries, register them with createApp({ stores }):

const session = brio.state({ user: null });
const cart = brio.state({
  items: [],
  add(product) { this.items.push(product); },
});
const configuration = { apiBase: '/api' }; // Intentionally nonreactive.

const app = brio.createApp({ stores: { session, cart, configuration } });
app.mount('#catalog');
app.mount('#header');
// Another app can share the exact same store:
const widget = brio.createApp({ stores: { cart } });
widget.mount('#cart-widget');

<section b-data="{ search: '' }">
  <span b-text="$stores.cart.items.length"></span>
</section>

Where stores are available

Where	Access
App expressions	$stores
Contextual scripts	$context.$stores
Component setup	$stores in the setup arguments
Plugins and application code	app.stores

Choose reactive values deliberately

Registration preserves the supplied values and identities and does not make them reactive. Explicitly use state() for reactive objects/arrays or signal() for primitive values (read signals through .value). Mutating a plain store does not notify bindings, although another dependency may cause a later read to see the new value.

Registration and store lifetime

• app.stores is a shallow read-only, null-prototype snapshot. Names cannot be added, replaced, or deleted after app creation; store contents remain mutable.
• Missing names return undefined. No stores produces an empty mapping.
• Registration must be a plain object of enumerable own data properties, not an accessor registry.
• Unmounting or disposing an app does not reset or dispose shared stores. Own store effects/resources explicitly; registration creates neither a resource scope nor persistence.
• Normal stores last only for the current page. Use scoped persist() or an explicit backend/storage adapter for reloads and multi-page navigation.