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

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.

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.

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,

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.

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

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.

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

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.

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.

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.

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.

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

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,

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.

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.

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

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

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.

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.