What Are Composables?

[00:00:00]
>> Ben Hong: So first thing first, Composition API. Anytime you create a reusable function with Composition API, we have landed on the term composables. Not my favorite, but it's what we landed on. So just know that going forward, when you're looking at code bases and you see over here, this little Composables folder, that is what that is referring to.

[00:00:24]
Basically Composition API functions that you will be using inside of your code base. So the question is obviously, what are composables, exactly? And so they're basically functionality that you want to reuse throughout your components. That's really what they are. Let's just give a quick demo of what that means.

[00:00:41]
All right, I'm on my begin branch and then let me switch over to the exercise branch so that that can get committed, great. Okay, so we have our Composables folder. And let's start by taking a look at our task page, right? And so you notice here on the task page we got there's a lot of stuff happening here.

[00:01:02]
In fact, I'm noticing there is, let's see, there's a lot of weak stuff. Filter tasks, so look, filter tasks, this looks like a very task specific thing. And as we can see here, it's actually being used in two different places. It's being used within the store, which we'll talk more about later, as well as within this page here.

[00:01:22]
So this is something that's clearly right for some type of refactoring because basically, yep, there's no point in them having two different places. So let's go ahead and just refactor this so we can use it. So first thing first, we're gonna go ahead and we're gonna create a new file inside of our Composables directory.

[00:01:42]
And so the standard for all composables is that you prefix it with the word use. And so in this case we're just gonna call it useTask.ts. And again, it's a typescript file, but don't worry, we're really not using very much typescript at all, if any. So then what I basically would do is I would go ahead and basically cut this out and throw this over here and then that's gone.

[00:02:09]
And then I'd go ahead and take a look at the task store. And where is that filter? Here you go, here's the filter. So this is the actual method as we can see here, there is a lot is going on here. So what we're gonna do is I'm gonna do the controversial thing and we'll talk about this more when do stores later.

[00:02:28]
I am actually gonna take this out of the store and put it in a composable. So here we're gonna take the filter task method. And so this actually I'm just gonna replace this one right here. And then, so we have the filters, and then that is a function that will, yep.

[00:02:51]
And then what we need to do then is be able to access the task list. So what I'm gonna do is I'm gonna actually say task list is going to be a task like this that we're gonna pass in. And so it'll be basically an argument that we're passing into our composable.

[00:03:05]
And then I think everything is mostly good from there. All we need to do now is import the type to say it's a type task and that it uses task filters, and then we're gonna export this as such. And there you go, now it's formatting correctly. Okay, so now what we have here is a reusable JavaScript function, right?

[00:03:30]
That's what we have. And so what we can do now is inside of our task store. I actually can leave it out because the only place is actually being called was here inside of the filter method. But I no longer need this anymore because what I can do then is basically say, okay, I'm gonna import filter tasks from my composable use task.

[00:03:56]
That's really all a composable is. It's allowing us to basically modularize parts of our script setup block into different files that we can then import. Really that's what it is at its simplest. And I wanna emphasize that because I remember when I first was introduced to this sort of concept, and if you're new to JavaScript, it can feel kind of intimidating to move stuff to files and then especially if you don't know how imports work.

[00:04:20]
We'll talk a bit more about naming strategy in a sec. But this is really at its core what it is. And so the reason Composables have become very popular is because rather than grouping things via how they work in VUE, so in Vantre, we used to have stack, actions, getter, so we would organize them via data computed and all those things.

[00:04:39]
You can now organize them via functionality, via features as this, rather than calling some sort of filter. We know that this is associated with our task feature, so we can drag that in. And so let's drag one more thing here. Let's say format status. This is very specific actually to tasks, but it actually looks like it's generic.

[00:05:00]
But from what I remember, this one is pretty specific. So we can take that out. And let's see, I like to do things alphabetical if I can. So there you go. This is filter. So we're gonna have the format status, but label, I like to be very specific with these so that you can tell kind of what is going on here.

[00:05:24]
So for my task status, label, I think will be good enough. And then all we gotta do to expose anything is the export keyword. That is the main thing here. Once you have that, we can go ahead. And now at the top, we can import format tasks label.

[00:05:40]
But it was format status before, so we need to make sure we update that format task status label.