$store Magic Property

Access global reactive stores created with Alpine.store().

What is $store?

$store allows you to read and write data in global stores that you've defined with Alpine.store(). It's reactive – any change in the store will automatically update all components that use that store.

When to Use

Use $store for any state that needs to be shared across multiple Alpine components – a shopping cart, user session, UI theme, or notification center. It’s a simple but powerful alternative to Vuex/Pinia or Redux.

Defining a Store

Alpine.store('cart', {
  items: [],
  add(item) { this.items.push(item) },
  remove(id) { this.items = this.items.filter(i => i.id !== id) },
  get count() { return this.items.length }
})

Using a Store in a Component

<div x-data>
  <p>Items in cart: <span x-text="$store.cart.count"></span></p>
  <button @click="$store.cart.add({ id: 1, name: 'Apple' })">Add Apple</button>
</div>

Reactivity

Any component that reads a property from $store will automatically re‑render when that property changes. This works even across completely unrelated components.