The first approach is to use an object stored in the windows object.

You can implement everything in it - means you can have values and methods - everything. Access to these values is easy and with init function call and some methods you can get it running quite nicely. So if you need an extremely simple solution and if you always have a method triggering the value change - go for it. To get an idea how a solution like this might work I have prepared a CodePen “ AlpineJS basic state management ” for you so you can check out this approach. There is nothing wrong with it but still it feels not right so you might keep thinking to yourself: Maybe there is something better.

Getting appetite

After investing a few more minutes in research you might find this article on CSS-tricks: “ Build a state management system with Vanilla JavaScript ”. Scrolling through this article gives you a great way to build your own store but do you want to invent the wheel again? No, so I want to shorten it up a little and lead you straight to the second approche: Spruce .

The second approach - here comes the sun

The first time I was reading the documentation of Spruce on GitHub I kept saying to myself this is exactly what I wanted - a reduced Vuex, Redux like solution for AlpineJS - great. You can even store all values in the local storage - persistent stores - to have a better user experience. You can add methods to the store and call them from every component - a little bit like actions. On top of everything, you can modify values from outside of AlpineJS and if you want to register a watcher outside of a component you can even do this.

Spruce.store('data', {
    firstname: 'John',
    lastname: 'Doe',
    email: 'hello@johndoe.com',
    log() {
        console.log('name: ', this.firstname + ' ' + lastname)
        console.log('email: ', this.email)
    }
}, true)

// logs user data to console.
Spruce.store('data').log()

// add watcher to data.email
Spruce.watch('data.email', value => {
    // do something with the new value here
})

// reset the store with new data
Spruce.reset('data', {
    firstname: 'Jane',
    lastname: 'Doe',
    email: 'hello@janedoe.com',
})

The init function call of AlpineJS is still working so you can fetch some data from other sources and put it into the store. Showing values from the store is as easy as looping through it. The only thing you have to do is to define your store and activate localstorage save if you want to.

Accessing store data in HTML

<div x-data>
    <span x-text="$store.data.firstname"></span>
</div>

<div x-data="list()">
    <template
        x-for="(item, index) in $store.data.values"
        :key="index" x-if="$store.data.values.length > 0"
    >
        <div x-text="item"></div>
    </template>
    <template x-if="$store.data.values.length === 0">
        <div>Nothing is in it...</div>
    </template>
</div>

Accessing store data inside an object

function test() {
  return {
    firstname: "",
    lastname: "",
    email: "",
    writeToStore: function () {
      this.$store.data.firstname = this.firstname;
      this.$store.data.lastname = this.lastname;
      this.$store.data.email = this.email;
    }
  };
}

AlpineJS advanced storage management with Spruce

To give you a nice example you can start with, I prepared this CodePen for you - Happy AlpineJS coding 😄.

All links in a practical list