Mastering AlpineJS in a Day or Less/

...

/

Declare a Global Data Store: Alpine.store

Declare a Global Data Store: Alpine.store

Learn to declare global AlpineJS stores with Alpine.store.

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:

Press + to interact
<script>
  document.addEventListener('alpine:init', () => {
  Alpine.store('title', 'Hello world')
  })
</script>

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