loading...
Empire state building

Updated: November 2020

How to get access to data from different Alpine JS components

In this article you will find two answers to this question and one of them feels right. So dive into the details and get things done the lean way.

Markus A. Wolf

Author: Markus A. Wolf Updated: November 2020
Taipei / Taiwan – UX Designer and product owner - worked in Germany, California / Silicon Valley and now Taiwan for international clients.

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 “Alpine JS 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 Alpine JS - 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 Alpine JS 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 Alpine JS 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;
    }
  };
}

Alpine JS advanced storage management with Spruce

To give you a nice example you can start with, I prepared this CodePen for you.

Happy Alpine JS coding :-)