Composition API

[00:00:00]
>> Now we're gonna move into our last section. So remember, we have that Github. And we're do building web apps with view. One Last thing, we are going to work with the composition API. Now, I'm gonna give you a small exercise because we spent the day building all of these apps and things.

[00:00:22]
And truly things aren't so different with the composition API than what you've been working on so far. The directives and all of the things that we work on with the template is exactly the same. But some of the ways that we set things up are a little bit different.

[00:00:37]
So I'm gonna show you how we set things up and give you a small exercise. So if we go into Building Web Apps with Vue and Nuxt. We have this Composition API, you might have heard a lot about it. I think sometimes think, U3 is the composition API.

[00:00:57]
No actually U3 is the same, the surface API has not changed that much. We have a whole migration guide in the view docs. If you go to v3 for now, and then we got this migration guide, and it gives you all sorts of information about anything that's changed and I go over a lot of that in the other courses in the interview course.

[00:01:22]
The composition API is an advanced additive feature. And so you can use it for an entire application. You cannot use it for an entire application. You can create components with it. You can also take an existing options API and merge. What we call composable now, which are just JS files that are the composition API, and use it similarly to a way that we used to use mix ins, where you're just encapsulating a little bit of logic.

[00:01:53]
View use is a site that has a bunch of information like a bunch of things that you can composable that you can use in your project you can NPM install. And you can see these like create global state one. You can see like use counter device like device motion use network or since it's all open source on Github, if you wanna learn how to make all of these kind of JS components that you can import into your app, you can look there.

[00:02:28]
So it's really good for reusable pieces of component or logic. The way that I'm typically gonna be working with it is using the options API generally and then in a composable folder. I'm going to start adding the pieces that used to be mixins and writing company kind of pieces of logic that I wanna use over and over again like if I'm using the window width or if I'm getting the mouse or if I wanna use dark mode or something like that.

[00:02:55]
But I am gonna show you how to build it. So that you can create an app with it with nuxt. It's inspired by react hooks. So when react hooks came out, they were really talking through all the ways that you can, encapsulate just a bit of logic so that if you have a larger component, you're not looking you don't have many different things going on.

[00:03:19]
You're pulling out one piece of functionality. That you can reuse across your application. It's also clear what's being exported. When we're working with the composition API, one thing it has over its predecessor Mixins, is in Mixins, it's not necessarily clear what you're being given, whereas with the composition API, you're always returning at the end.

[00:03:42]
So you know explicitly what's being returned at the end of the composition API, which makes it pretty legible for a maintainer to come in and say, okay, these are the things that we're working with here. They can be composed together. This is the thing that mix ins, which predated it did not do.

[00:03:59]
So previously. If you wanted to take a dark mode, mixin and just use that little bit of functionality and then you wanna something else you couldn't. Encapsulate them into pieces that worked together. And that's part of the reason why we use the name composition API is because you can actually compose multiple pieces together with each other.

[00:04:23]
So you could return something that gets, used and another one, and then therefore, you're able to kind of mix and match in It's a little bit like Legos, you can build whatever experience you want. So, if you're in the other workshop, I'm just gonna give a quick overview of what the composition API Is in does.

[00:04:47]
If it's written correctly, they're pure they don't modify or change things outside of the function scope, you will always reliably receive the same value with the same input on multiple executions. That's a note to you as an author to try to make sure that they are pure. They can be really powerful.

[00:05:06]
So I mentioned before, there's like this kind of famous tweet from react hooks where someone was describing why they're so powerful. And they showed this video of a component with a lot of different types of logic. What it allows it to do is be grouped together. So what we're doing now is we're grouping together similar types of logic and it also has the added benefit of really great Type Script support.

[00:05:32]
So if previously what we did was work with this data return tacos as a string, and we said yes or no, you're a monster. So do you like tacos? Yes, no, you're a monster and we have this, data return tacos then inside, when we're working with the composition API, what we would do is say const ref equals view.

[00:05:58]
We will have a setup we'd say const tacos equals ref and return tacos. So I just mentioned before, that we're explicitly returning what we're using this const tacos ref is an empty string is, equivalent to data. So we can say yes or no, you're a monster and this does the same thing you might also note that we have this setup.

[00:06:24]
And so we're, we're passing everything through setup I'm not gonna go through the whole thing but what I think is really important because because you can go look at that other course. But another piece that I think is really important is that you can state reactive here, instead of saying ref for everything and say ref ref ref ref ref.

[00:06:44]
You can use reactive similarly to the way that you use data before in the options API. So, In here, we could say reactive count dot zero if we needed more properties, instead of restating ref, we would then add to this option. And in order to access that we would say state.count so I'll show you two different examples and then we'll jump into the application.

[00:07:11]
In, a bigger thing let's talk about it we just got used to that from our last next app, we're saying in set up, ref, ref, ref ref, and each one of these you can think of as the data property. So we've got, let's talk about it and we're gonna array and we're passing in each one of these.

[00:07:32]
If we want to access any one of them we will access them by num items dot value, dot value is how we'll we will access something in a ref. And then we're also returning all of these options as well as any function. So you can think of that function like a method.so here, we've got, ref ref ref and add items and so forth.

[00:08:01]
If we're using something like reactive, what we would do instead instead of calling ref repeatedly, it's more like that data here so, we've got the restaurant name options, and it's pat all passed in. We can also say to reps in passing state instead of just passing in state, we're gonna say spread to reps into state so that we don't have to keep saying state dot num items.

[00:08:28]
State dot delivery time in our template we can say just delivery time so we're passing all of state into tariffs, and also returning the add items. If you wanna go into more detail the other course goes into computed and watchers and so on and so forth.