Composables Exercise

[00:00:00]
>> So what I'd like you to do is to actually give this a shot, practice around using the idea of a composable in your directory. So basically, I kind of wanted to outline it a bit. You'll create a composables folder inside of your source directory. Look inside of your app, see what opportunities there might be to share some state or functionality.

[00:00:18]
Or if you don't have it, obviously, like I did earlier, just go ahead and do so to practice it, practice sharing those things. And so here I said create a file called useState or useFunction. Basically I know in my case I called it countStore, which is a lead in for something else in the future.

[00:00:32]
But generally speaking, when you're naming your composables, you do prefix it with that use. So in that case, I should have probably named it like useCountStore, for example. And then otherwise just try stuff out. All right, so how that feel with the composables? Is is that kind of a bit weird to deal with?

[00:00:55]
I see a lot of people still typing, so probably still tinkering away. People in the chat, if you had any sort of issues with those composable, please let me know. So I'm just gonna head and kind of walk through a simple example for the solution, and kind of talk through some theoretical things while we're at it.

[00:01:12]
So let's go ahead and switch over to C'est La Vue. So if we look at C'est La Vue, what do we have? Well, we have a couple things going on. We have a UserCard here. It's fine, UserPage, okay. We have some async stuff happening. All right, well, this is in the script setup, so this actually might be a good one.

[00:01:30]
So let's say for instance, then, that we want the ability to display the users in more than one place. Cuz the UserPage is a great place to list it, but on the other hand, there might be reasons actually to display it on the homepage, for instance. So let's just abstract that away into a composable.

[00:01:45]
So I'm gonna go ahead and create a new folder here for composables. And then we're gonna create one, and following the syntax now we're gonna call it useUserStore.js. And all we're gonna do here is we're gonna do a import reactive from Vue. And then we're going to export a const called userList.

[00:02:12]
Although actually, you know what I'm gonna do? Because we're actually just exporting the single array, I prefer usually to use ref when it's not an object. So reactive is usually when I think of like a more complex object, that's personally kind of where I lean towards. So userList is a ref of an array, that's all this is.

[00:02:31]
And so now that we have this here, we can go inside of UserPage and we can change this up basically to say okay, so I'm gonna import, From, from what? From, go up one level, go to composables, go to useUserStore. And then what we're looking for inside of here is the userList, which is auto completed right there.

[00:02:55]
So now we can technically delete this. And then this means we can delete the reactive up here. And then wherever userList is being called, we will remove the state. And then because we're in script setup, remember that it's a ref. So we just unpack it with .value. And again, it's nice cuz the tooling has updated now, so that it will actually tell you that it expected the .value.

[00:03:16]
There was a time where the tooling hadn't caught up, and so it was really easy to miss that on your own if you weren't paying attention. And so there we go, userList is now available. We can save and everything should still look good. Yeah, it looks good to me.

[00:03:28]
If we go to Home now, let's actually show that we can do something similar. So we'll go now over to the home page. So homepage, and I'll just use the script setup again up here. And let me just actually copy that, snip it over from up here. So import, there we go, userList from that.

[00:03:46]
Import userList right here. And again, once we've imported it, the mental model shift that you have to think about here is that it is already available. So we can go ahead and just do an li in this case. And then v for user in userList and then user.name.

[00:04:11]
I think that should work. There we go, it's looking good. And then to show you why this is incredibly powerful is that maybe in this specific context, this is where I want to actually only show the first five. And so I don't need this to pollute the entire file.

[00:04:26]
What I can do is Is I can just import the computed property from Vue. And just say const shortUserList is a computed property that returns userList.value, [SOUND] what was it? Splice, let's see, yes, splice (0, 5), I think. I think that returns it, great. And then we can do shortUserList here.

[00:05:01]
You'll notice, there we go. Now we have this global piece of data that is shared in two files, but we also have some very specific contexts on how we might wanna manipulate that data for that one component. And that in and of itself is, I think, the power of the idea of a composition API, in that you can really start to compose things the way that makes sense to you.

[00:05:19]
And so the other thing about Vue 3, which we're not gonna cover at all, but I did wanna make a mention to it because those coming from Vue 2 or those looking at Vue 3 docs might notice that mixins are a thing that also were particularly popular during the Vue 2 days.

[00:05:32]
And mixins what they basically allow you to do, it was a way for you to share functionality and state using the options API. Nowadays I would say the fact that you have these composable and reusable pieces of state and function that's easily injectable in a very concise way, these are basically superior to mixins in every way, shape and form.

[00:05:50]
It's really actually hard to argue for using mixins over the composables. So it is valuable to spend the time to get familiar with it, try it out, and start figuring out where it kinda lands in your comfort zone. But as you can see here, there's something really nice about being able to say okay, yeah, I'm getting what the userList from where there's useUserStore.

[00:06:10]
And then you just know where everything is, everything's named correctly or if you need to update it, cuz there's some name clashes. Everything is very declarative and explicit. So, yeah, so these are composables in a nutshell, and that kind of puts a wrap on the composition API section of all the things we're talking about.