Alpine Store Basics
This episode is for members only

Sign up to access "Alpine Store Basics" right now.

Get started
Already a member? Sign in to continue
Playing
04. Initialising stores

Episodes

0%
Your progress
  • Total: 29m
  • Played: 0m
  • Remaining: 29m
Join or sign in to track your progress

Transcript

00:00
We can initialize stores much like we can with standard Alpine components. If you've not seen this before, let's go ahead and just create out a really simple example here. If we have a Alpine component in here, we can either go ahead and use X in it, and we can call a specific method that exists within our data.
00:17
So for example, we could say start, and inside of X data, we could go ahead and create out a start method. So let's go ahead and do that now really quickly, and just do a console log, and just say init. So when we go ahead and run this, sure enough, we see init. Or what we can do is just use an init method, which is a built-in shortcut for this,
00:39
and that will do exactly the same thing. If we give that a refresh, it works in exactly the same way. Now we can do this within our stores. Let's take a look at an example of this, and then we'll look at a more practical example of when you might need to initialize a store.
00:53
So really simply, we just create an init method inside of our store, whatever this is. We're actually going to set this to a to-dos list. So in here, let's go ahead and console log, and we'll say store init. Let's go over, and there we go.
01:07
It works in exactly the same way as a standard Alpine component. So why would we want to do this? Well, it could be for anything. You might want to fetch some data from an API.
01:18
You might just want to do some general setup in here. Let's look at a practical example and just use JSON placeholder to grab a list of fake to-dos. So we're going to come over here, and inside of init, we're going to make an API request to this endpoint, and we're going to pre-populate some of our state.
01:34
And again, I'm going to wrap this in an object called state just to keep things simple. Okay, let's get started. So we're going to have a list of to-dos in here, which is going to be an array, and init will go ahead and fetch these. So let's use the JavaScript fetch API for this, and let's go ahead and pop that endpoint in there.
01:51
Let's go ahead and make sure that we grab the response back and set this to JSON, and then let's go ahead and grab that data. So we're going to console log on this data just so we can see this, and let's go over and give this a refresh. There we go.
02:06
There are our list of 200 to-dos. So now what we can do is we can set this state to-dos to the data that we get back. Now, let's just go up to the top here and go ahead and create out another component, and let's go ahead and output that list of to-dos.
02:24
We'll start off by just outputting the object. So let's say X text and store to-dos state and to-dos, which we'll change in a minute with a getter, and let's go over and give that a refresh. And there we go.
02:37
We get a bunch of objects. So for this, we'd obviously want to iterate through them. So let's go ahead and create out a template in here, and let's say X for to-do in, and again, store to-dos, state to-dos. Again, that's a little bit annoying, so we'll change that up.
02:55
We're going to go ahead and key this, so let's key this by the to-do ID, and let's go ahead and output one of the to-dos. So let's say X text, and let's just say to-do title. That will do. Let's go over and give that a refresh, and there we go.
03:10
Not great at the moment, so we could actually change this over to a div. Let's go back and give that a refresh, and there we go. There is a list of our to-dos read from our state. Now, again, with this, we'd probably want a getter just to get the to-dos.
03:24
You might implement some sort of ordering on here, so this getter would be good to have a to-dos list in ordered of created, for example, but for now, we'll just keep this as a handy getter. So we're going to say this state and to-dos, and now we can just change over how we access this to store to-dos and to-dos. Let's go over.
03:44
You can see it works in exactly the same way, and that's pretty much a good example of using init in here to pre-populate our state or do any other setup that we need so we don't need to do this outside of our store. Of course, we could do this outside of our store. Let's take a look at this if you come across this anywhere.
04:04
So let's get rid of init. If we didn't have that init method in here, what we would have to do is say alpine, and we would have to say store to choose the store that we wanted, and then we would have to go in and specifically set the to-dos either via method or directly accessing the state and to-dos. So let's go ahead and add our fetch just down here and pull these in, and then let's add this line just over here.
04:29
So that looks a little bit messier because this is kind of happening outside of our store declaration. It's still going to work if we just come over and give that a refresh and actually set this up to do this properly and actually assign it there. Then you'll see that works in the same way. But I'm sure you'll agree if we just bring this back to how it was before without init method, that looks a lot better.

Episode summary

In this episode, we dive into how to initialize stores in Alpine, which works in a very similar way to initializing regular Alpine components. If you're new to this, don't worry—we start off with a super simple example. We look at how you can use the x-init directive or define an init method inside your component or store to handle any setup or fetch actions when the component loads.

We then shift gears to a more practical, real-world example using a to-dos list store. You’ll see how we wire up an init method that fetches a bunch of fake to-dos from an API (with JSONPlaceholder), logs the data, and then sets it on our store's state. You’ll learn how to output and loop through those to-dos in your markup for display, and how you can improve things by extracting a getter for easier access and better organization.

To wrap things up, we compare initializing the store from within (using the init method) versus setting up state from the outside, and why keeping the initialization logic inside the store is usually cleaner and more maintainable. By the end, you’ll have a good grasp of initializing stores and why it’s best to handle setup inside the store itself.

Episode discussion

No comments, yet. Be the first!