Search⌘ K
Home
Courses
Mastering AlpineJS in a Day or Less

Declare a Global Data Store: Alpine.store

Explore how to declare and manage global data stores in AlpineJS using Alpine.store. Understand how to register single-value and object stores, access them via $store or Alpine.store methods, and initialize stores with default values. This lesson helps you manage component states globally and build more maintainable interactive web applications.

We'll cover the following...

Alpine.store allows us to define global AlpineJS stores that our components may need. Thus, it enables us to globally manage component states, decoupling states from our user interface.

Define stores with Alpine.store

We can define a global AlpineJS store in two ways. The difference is in which method we used to install AlpineJS. If we set up AlpineJS through a <script> tag, we define stores like below:

Javascript (babel-node)
<script>
  document.addEventListener('alpine:init', () => {
  Alpine.store('title', 'Hello world')
  })
</script>

Registering an AlpineJS store from a bundle is similar to defining Alpine.data ...