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
05. Single-value stores

Episodes

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

Transcript

00:00
Single value stores are a thing, and this is how we use them. So we previously used Alpine Store to create out a store, maybe user. And we provided an object in here, which allowed us to use properties, methods, getters,
00:13
all that kind of stuff. But if you don't need an object in here with any methods, for example, if you just had a single value in here, like a name, you can just go ahead and go ahead and give a primitive type, like a string.
00:26
So let's go up here and output this. And again, we're just going to use a simple span with x text. And let's access our store. And this time, all we need to do is just access store name.
00:37
There's no property here. It's just a single value. This can be a number, a string, anything you need. If we give that a refresh and have a look,
00:44
it doesn't work because, again, we have forgotten to add x data. Give that a refresh. There we go. That is a very, very basic single value store.
00:54
I think at the time of recording, the example given on the documentation is whether you have a dark mode enabled or not. So for example, that could be true or false. Now, let's look at a fun example of dynamically changing
01:07
the title of the page with an Alpine store. Now, the reason that this can be useful is inside of a document, you might have maybe a website, like Codecourse, with maybe some notifications.
01:20
And you might display the count of how many notifications you have at the very top. Again, this is going to be a really rough example, but it'll give you a good idea as to how
01:30
you can use store to conveniently update this value from any location. So let's just say that we had a notification count in here. Let's just say that that was set to 1 by default, perhaps set by the server side.
01:44
In our title, we might want to bind this in. We can actually do that by setting the title as an Alpine component. You may not have known that. So again, we're going to say x text in here.
01:55
And the title for this is going to be Codecourse. And then in parentheses, we're going to have from our store. We can just use store and notification. Let's just set that to notifications count, maybe.
02:09
Let's just change that over as well. So if we come over and give this a refresh, sure enough, we see the title is Codecourse and 1. Now, from anywhere, you can pretty much trigger an update to this value.
02:21
This doesn't have to be a single store to use this functionality. But if you did need this, then this would be a good place to use it. So let's look at an example of updating this single store value, which will effectively change the title because we're
02:34
accessing our store. So inside of the body, let's create out a div inside of here. Set that as an Alpine component. And then maybe let's just say on initialization,
02:46
we'll go ahead and use set timeout within JavaScript just to give us a slight delay. So it's kind of simulating some sort of event rolling in, which will increment this.
02:56
So what we're going to do is we're going to say store notifications count. And we're going to set this to something else, so 5, for example. And of course, within our timeout, the second argument, we need a count. Let's do 2 seconds.
03:09
So what's going to happen now is we've got this single store with 1 that's being shown in the title. This component here with a timeout, which is simulating some sort of event rolling in, that's going
03:20
to set the store notifications count directly to 5 after 2 seconds. Let's give this a refresh and just wait. And we should see, after a couple of seconds, that value updates. So really, really powerful, particularly when
03:33
you're combining it with things like meta elements, where you can update a single value. And like I said, you don't need to have this as a single store. This could be an entire notification store.
03:45
And you could have a getter in there, which you could also use in the title or anyone else you needed. But if you want to keep things clean, and if you do only have one single value that you need to use, single store values are there to help.

Episode summary

In this episode, we dive into the concept of single-value stores in Alpine. Sometimes, you don't need an entire store object with properties, methods, or getters—maybe you just need to track a simple value, like a user's name, a theme mode (dark or light), or a notification count. That's what single-value stores are for, and here you'll see exactly how to implement and use them.

We'll start by setting up a basic single-value store with a primitive value (like a string or number) instead of a complex object, and see how straightforward it is to display this value in the UI. You’ll watch us stumble over a typical gotcha (missing x-data) and see how to quickly fix it.

To make things more interesting, we build out a practical example: dynamically updating the page title based on a notification count stored in a single-value store. We simulate an incoming event (like a new notification) with a timeout, updating the store and, in turn, the title bar. This is a great demonstration of how you can use Alpine’s stores to share and react to state changes from anywhere in your app.

By the end, you’ll see how single-value stores help keep things simple and tidy when you just need to manage one bit of state. If you only have a single value to track, no need for a big store object—just drop in a single-value store and you're good to go.

Episode discussion

No comments, yet. Be the first!