Alpine.store()

Create global reactive stores accessible via $store.

What is Alpine.store()?

Alpine.store() creates a global reactive data store. Any component can access it using the $store magic property. It's Alpine's built‑in state management solution.

When to Use

Use stores for data that needs to be shared across multiple independent components – user authentication status, theme toggling, shopping cart items, or notification queues.

Defining a Store

Alpine.store('theme', {
  dark: false,
  toggle() { this.dark = !this.dark }
})
// Must be called before Alpine.start()

Using in Templates

<div x-data>
  <button @click="$store.theme.toggle()">Toggle Theme</button>
  <div :class="$store.theme.dark ? 'bg-gray-900 text-white' : 'bg-white text-black'">
    Current theme: <span x-text="$store.theme.dark ? 'Dark' : 'Light'"></span>
  </div>
</div>

External Access

You can also read and modify stores from vanilla JavaScript using Alpine.store('name'). Changes made outside of components are still reactive.

const themeStore = Alpine.store('theme')
themeStore.dark = true // triggers re‑render in all components using the store