All language subtitles for 6. Managing State

In this video we're going to start doing is managing the state of our application specifically.

We're going to be managing the options that we have clicked on.

So when we click on, let's say Girl, our state should change so that the girl is the selected option

and this should be all colored in.

So we should know how to do this.

However, if you don't, let's just go ahead and follow along.

So we're going to create a script tag.

This is where we're going to house all of our JavaScript, and thus we're also going to house all of

our state as well.

So right inside of this script tag, so right in here, what we're going to do is we're actually going

to use the composition API for this.

This is for Vue three and NOx utilizes Vue three.

So instead of just having an empty script tag, what I'm going to do is I'm going to say script setup

like so.

And what I actually prefer to do is grab the script and just place it all the way at the very top.

I think it's just a little bit more organized, doesn't really matter where you place it, but I prefer

to have my script here, my template here, and then my CSAs at the very end.

Okay, so now that we got that set up, we can start creating our state.

So let's go over here and I'm going to declare a new variable, and this variable is going to be called

options.

Now, this is going to store the current state of our application and it's going to store a an object

to do this.

So what we're going to do is utilize reactive in order to have a state of objects.

Now notice that I actually didn't import reactive from a view Knox is really, really great when it

comes to auto importation.

So what we can do here is just very simply say reactive like so.

And NOx will understand that this is reactive from Vue and import it into this file.

So right over here we're going to have three different states.

This is going to be the gender initially.

Let's just set it as girl.

And then over here we're going to have the popularity.

So pop you layer a T initially, let's just send that as unique and then we're also going to have the

length initially.

Let's have that as short.

So right over here, this is our current state of our application and of course we want to modify this

state in some way.

But for now, what we want to do is we want to grab this state inside of the HTML template and change

the background color of the button.

So if it's girl, then this button right over here, it should be colored in and then over here for

unique because the popularity is unique, this should be colored in and also this should be colored

in as well.

So let's actually go ahead into our buttons.

And what I'm going to do here is I'm going to add another class right over here, right at the very

bottom.

And this I'm going to call option active.

So I'm going to say option active because this is the active button that's being clicked.

We're going to give that some some styles.

So what I'm going to do is I'm going to give it a background color of that border that we have right

over here.

So this outline, this let's go ahead and copy that.

And paste that in there.

And we're also going to give it a color of white.

So we're going to change the color to white like so.

And so now what we're going to do is right over here.

So right over here on this button, we're going to actually apply that as well.

And we should get something that looks like.

So now right now, we are adding it manually.

We what we want to do is we want to do it dynamically only if the option that gender is equal to girl.

So let's go over here and let's actually make this multiple lines because this is going to get a little

bit more complicated.

So what we're going to do here is we're going to say.

All in class to define that we want to have some sort of JavaScript in these parentheses.

We're going to say only if the options dot length.

Or the options.

Diet.

Not length.

Diet.

Gender.

Triple equals girl.

Then what we want to do is apply the class.

Then we can say.

And.

And so.

And.

And.

And then quotes.

Then over here we can say option active.

So now if we save that, you can see that this is working.

A Okay.

We're probably going to want to do that for all of the other buttons as well.

So right over here we can say if this is equal to unisex.

So unisex.

And then over here we can say the same thing and say this is equal to boy.

Let's go ahead and save that.

And now let's go ahead and change this, for example, to unisex.

Now you can see that this one's the one that is colored in.

Okay, so this is looking good.

Let's actually apply these to the different buttons as well.

So the the trendy and unique button.

So just grab this.

And let's go here, paste that in and then let's go over here.

Paste that in as well.

We're going to say if the options dot and where was it?

Options dot popularity.

If that is equal to trendy.

And then over here we're going to say options.

The popularity of that is equal to unique.

Let's go ahead and save that.

And by the way, if you're wondering, how in the world do we have access to this reactive state inside

of the template?

We're not exporting anything.

Well, with script set up, we don't have to export anything.

Everything is just automatically imported over here.

We can have access to it.

Whereas with maybe the scrub set up function or the options API, we have to explicitly say what we

want to export.

So that's why we have access to this options object right over here.

So last thing over here is what we're going to do is we're going to just copy this.

Paste that in here like moi.

And then over here we're going to say that this is going to be the length.

So length.

And then right over here, we're going to change this to this is going to be longer.

So let's go ahead and copy that two more times, paste that in there and then paste that in there.

And this is going to be all and this is going to be shorts.

That's pretty much all it is that we need.

And now you can see that we have some state going on here, maybe just to make this a little bit nicer,

let's make this long.

So we have, you know, some some mixture of things going on.

Okay.

So this is really good.

Now, of course, if we click on it, what we need to do is we need to change our state.

And by changing the state, then it will also change the different colors of the buttons.

But before we do that, I actually want to refactor the way that we've done this, because we've done

this with plain old vanilla JavaScript.

But I prefer, in my opinion, to use TypeScript, and that's what we're going to be using throughout

this course.

So let's actually look at a better way of doing this by utilizing TypeScript.