Migrating to Composition API Practice

[00:00:00]
>> So, your exercise is to go to the disc page and try to do what we just did. Which is essentially migrate everything that you see inside of the options, so that means data, computed, methods, and mounted, and practice moving that all over into composition API Okay, first things first, we're gonna go ahead and what we need for the composition API is a setup method.

[00:00:26]
That is a life cycle hook that will hold everything in here. So let's go ahead and just, I'm gonna copy all this over so let's migrate data first, so inside of here paste that over, so we have a const, oops, that was a typo constants are text and this is a ref.

[00:00:43]
So again, I'm gonna import that automatically. So, if you'll notice that in the autocomplete if your VS code is hopefully working the way I hope it does, you'll notice that ref should show up and if you select a package I'll show that one more time. If you just select the top one, it's just gonna do some random thing.

[00:00:58]
But you'll notice that ref here it'll actually say that it's from the, you see that little package thing from view, that's how you know it's from view, that's why it's really important hang on, let me go back. I do on my show that get that screengrab. So again if I go ref, you'll see that on the right hand side there's that it tells you where it's coming from and that's how you know you want to import it from you.

[00:01:20]
So that's how I'm doing that, so when I hit that it'll automatically augment my import up here, so just know that's all the magic that's happening. All right, ref of string. We're good at cons dishlist is going to be a ref of dish array. And then we just need to pass that in as an argument.

[00:01:37]
So wrap that in parentheses, and we're golden. The why is this data looks better. And then const showNewForm is a ref. That is a Boolean, but we're gonna let that automatically in first. So as you'll see that we don't need to define this here. We don't need to be like Boolean.

[00:01:55]
And we don't need to be like string because it's being assumed that that will be the case for both. All right, then let's go ahead and just start our return object because we wanna actually expose all these. So filterText showNew Form and dishlist, great. Now we can delete this data, data shape up here at the top.

[00:02:20]
All right, let's keep the journey going, we have two things that are computed. So we're gonna jump in here. Once again, this is a constant filter dish and what kind of variable is it? It is a computed variable. So once again, you'll see the view right here, hit that.

[00:02:33]
And you'll see that imports here computed right at the top and even alphabetically organizes it, which is great, right? So bump, bump, thumb, there we go. We'll, deal with that this is in a second. So then here = computed. And then we just need to turn this into an arrow function.

[00:02:53]
And actually small aside, that's actually one of the nice things about the composition API is that arrow functions and options API would break this reference sometimes. So you actually couldn't use arrow function within options API when defining things. So it's a nice thing to get back to you if you enjoy that kind of shorter syntax list.

[00:03:11]
All right, so now we just need to grab anything that has this because we know that we're using refs for all of it basically. And then we just need to delete it and then replace it with .value because we need to unpackage our references. So there we go.

[00:03:24]
That's good to go now and so now we can say filteredDishList. And then we have our number of dishes. Great, finally we're almost there, we're just gonna actually let us grab all this and just move it on endless grab the methods and then 123 const = jump ahead at the arrows.

[00:03:51]
This is great, wait, I messed up too far there. Yeah, jump here. Then we go one, two, three =, then jump to the end than that and then we're good to go for the most part just have these commas to deal with for all this stuff we can just do this too much.

[00:04:13]
One, two, three, four. I'm using command d for me. This is how you select multiple things on your cursor and then from there 1, 2, 3, 4 .value. Save let's good addDish deleteDish. And hide form for the sake of being alphabetical and finally, we have our own mounted here.

[00:04:37]
And so we have on touch on mounted and you can see here it's now autocompleting with view so I can hit Enter. And once again it will automatically import that directly from view. And then we just need to pass it in the callback function that will run every time it hits that lifecycle hook.

[00:04:55]
But we don't have this so what do we need? We need use route and we'll import that from use router and boom, again the auto complete is one of the best things about script to be totally honest, even if you're not annotating everything. Cause that's one of the benefits of using TypeScript is that, anyone who's like the library authors who went through the effort of documenting all that, you just get that for free.

[00:05:17]
And so that's another, to be honest, another reason why I like to recommend just starting out using Type script, even if you're not actually applying it everywhere. Okay, on mounted, that's good. And I think that's everything. So, I had you all do that exercise for a reason is that, some of you probably were thinking, even as I was typing, you're like, wow, that's a lot of boiler plate, particularly [LAUGH] this thing down.

[00:05:45]
What I'm happy to tell you is that, there is a better way of doing this, which again, I wanted to show you just a full pass, so you know where all this is coming from. We'll be showing you sort of the more common way you'll see composition API use going forward, and then from there we'll continue building on our knowledge, for using view and typescript.