Composables

[00:00:00]
>> So you've probably noticed at this point that, well, when we take a look at this for the Photo Gallery of the todos, and we're looking at this, we are actually kind of doing some duplicate work in this regard. So one, we probably should be ingesting TodoViewer and PhotoGallery directly on the page.

[00:00:16]
They really don't make sense as their own component, cuz this is basically page level stuff at this point. So let's actually start by moving this stuff over. I think that'll make things a little bit easier. So let me just drop all that here. And then let me grab the PhotoGallery and drop all that into photos.

[00:00:32]
And then next, what I wanna do is let's just clean this up a bit, so that it's easier to read. So that's fine for now. We don't need this. We don't need any of this for now, just gonna keep it simple. Great, and then we have todos. We have some defineProps.

[00:00:51]
Okay, we don't even need all this stuff, to be honest. We just need that, so defineProps can be gotten rid of. We don't need this fetch function anymore, this is great. We can get rid of all this commented HTML for now, okay? And I think now, if we go back and refresh, Home, Display, Photos.

[00:01:14]
And then for whatever reason, that's glitching out. But our components are rendering and they work. So, okay, so the question here is, we know that the path actually correlates with the type of item that's being received. We know that for a fact. So really, when we do this BaseDisplay type todos that we're manually defining, we could actually make that a dynamic property, right?

[00:01:39]
And so getting parameters from your route is the next logical thing you're probably looking to do inside of your app. So what we're going to do is learn about composables, which we briefly touched on before. But I just wanna formally cover it this time. And so what composables are is every time you use Composition API in Vue, you'll see that a lot of the new helper functions are prefixed with the word use.

[00:02:02]
And this is very similar to React Hooks, right? Cuz they're trying to let you know that you're doing something that's not just any sort of JavaScript utility library. And so if you think about utilities, right? And then maybe that's a better way to frame it, is that on a typical app you would have a folder called utils.

[00:02:17]
And let's say you're using moment.js, right? And so moment.js would have all these helper functions inside of it to help you manage time, time zones, whatever. But we have something similar now with Composition API, which basically says we can let you build all these helper functions. But they're gonna use Composition API, cuz they're probably gonna have reactivity attached to it, lifecycle hooks, etc.

[00:02:38]
So rather than get that mixed up with utilities, cuz they're still kind of like utilities, the official term given to it are composables. So if you hear that, it's easier if you think of it as a type of utility function that uses Composition API. That's all it is, it's nothing fancier than that.

[00:02:56]
Now that you know that, in the Options API in the past, every time you wanted to access something on the route, the most common thing was to do something like this.$route. Cuz there was this global thing that you could access at any given time. But like I said, we're in Composition API land now.

[00:03:11]
So we actually try to mirror JavaScript as much as humanly possible, no more global imports and that kind of stuff. So what do we need? We actually need to import something that is gonna help us find the route. Well, since it used to be this.$route, naturally, we called it useRoute.

[00:03:26]
And this is what is called a composable. So, not this one. So let me just go ahead and import that to show you how this works, so import useRoute. And so useRoute, you can see, is a composable that is imported from vue-router. Basically, it's a helper function, just like we had ref, compute, and these sort of things.

[00:03:44]
It's saying, yes, I wanna get the route from this current state. So we do is, we can say const route = useRoute. And so I'm gonna go ahead and log the route inside of the todos path right now. And so we can see what's inside of it, all right?

[00:03:59]
So, oops, go back, Todos, all right? So you'll see that when you actually log this out, it's a proxy. But then, look. All the stuff you'd want inside of your route is actually now accessible to you, your path, your hash, whether it's, matched, meta, name, params, etc. And so what we end up getting actually inside of the params, if you look at what's inside of here, this is a lot.

[00:04:24]
Okay, it's probably easier just to log it, route.params here, and refresh. This one's empty. What am I thinking of, route.params? Path, yeah, that's what I think I'm looking for. Here we go, so we have the todos. And so what we get here now is we can say, okay.

[00:04:52]
So what we can do, we can basically take the end of our path. And now we can basically move that going forward. And so let me just go ahead and double check, okay, yep. And so what we can do now actually, let me see if path gets us even shorter than that.

[00:05:08]
Path also does the same. I wanna say there was actually a way to just get the tail end of your param using a standard HTML thing. I'm just trying to remember what that was, name, value. No, this is not the name. Meta, matched, hash, fullPath, query, there are no queries on this one.

[00:05:32]
It's totally empty, yep. Okay, that's totally fine for now, we can just split this off. I wanna say at one point there was a way to do this. But okay, so we can do is we can say, const itemType is going to be route.path. And we can do, we just split it, basically up by the slash.

[00:06:00]
And then we're just gonna grab the first item. 0, 1, yep, that should do it. And then if we log this now for itemType, We should be able see, there you go. Display, that's the wrong one, so a good thing we checked that. So let's say we're looking for the second one, and refresh.

[00:06:17]
There there you go, now it's todos. So now that we have that, we could basically just come in here. And we can now just pass, instead of itemType like this, we can now dynamically bind it. And so there you go. Now, you have your route params.