Options vs Composition Stores

[00:00:00]
>> Ben Hong: Those who are taking the Vue through fundamentals. I think the first time I covered Pinia, we talked about options. And so I just need to do a quick overview on the Composition stores now that we are all on the same page regarding composable APIs and kind of how they work.

[00:00:12]
So the technique here is basically called composition or setup stores. I explicitly left the task store in here because, as you can see here, this is an example of an option store. And so this is actually useful context for those, especially if you were always pure composition API.

[00:00:26]
You came into Vue 3. It's neat, as I've taught workshops over the years, to see the audience change from I've never used Composition API to people now saying I've never used Options API. Things have changed. It's wild. For those of you who have been pure Composition API, this was the elegance of the Options API in the sense that you knew exactly where to put stuff.

[00:00:49]
State goes inside of this state. Key getters, which are essentially computed, go inside of getters, and then your actions were essentially your methods or your functions. So that was basically all it was. That is one of the elements of the Options API, and one of the reasons it was so popular is because it allowed people who might not be as savvy from the JavaScript perspective to still come in and be to contribute to the code base.

[00:01:13]
So I think one of my stories I always like to share is that I was teaching a workshop introductory to Vue. I was back in Vue 2, it's not Vue 3 yet, and there was a designer who told me she almost didn't come to the workshop at all because she'd only been doing, HTML and CSS for most of her coding, and she hadn't done that for years.

[00:01:28]
And so she thought she was going to be completely way out of her depth, but she decided to stick it out. And the workshop was, I think, about two hours, and by the end of it, she had a functioning VUE app and was able to understand the basics of, like, you know, updating the state and whatnot.

[00:01:41]
And it wasn't incredibly complicated, but I think the fact that she was able to do so speaks to. I mean, that is the power of standards and having people being able to follow those things. Any cautionary tale. I love Composition API. I love how flexible it is. But we do have to remember that we still want to try to keep our code as maintainable, scalable, as humanly possible, so that it is still accessible as much as humanly possible to our users.

[00:02:06]
When we can here basically what a setup sort is. Instead of just saying hey look, we're going to have this defined store that's an object, that is the options. It basically just says hey look, we're going to have this defined store that has this key and this time we're going to have a function that returns a bunch of stuff.

[00:02:26]
For example all this state. So just to keep it easy, I'm going to delete this. This is state. All this stuff in here just becomes variable. Do 1, 2 const 1, 2 this. All of your getters. Actually let me do this first. Sorry. Import ref. I'm just going to grab computer while I'm at it.

[00:02:59]
So ustorage is already done here, so I'm just going to leave that alone. So people have that to differentiate that it really doesn't look as. Can I wrap this whole thing? Apparently I can. Okay, then all of our getters here which are essentially computed. So these are ref or reactive, your choice.

[00:03:23]
Generally I recommend ref because it's just a bit more stable. And then so we have one, two looks like. Okay, I'll just focus on these first. Const equals. And then we have computed. And then we don't need the state anymore because it's inherently going to be reference task dot value dot length.

[00:03:49]
That's it for that one. Then this one's computed. Yep. Returns task value reduce La la la la la bum bum. Then I think that is covered. And then a couple more. Do const 1, 2 equals computed state. Whoops, forgot one. That it goes here. And then set a state.

[00:04:28]
Task state dot value task value. Yep, that takes care of all the getters. And finally, luckily actions are actually pretty easy because they basically are just. You just need to add the function in front of it. I need to update some of those in a second. Async function, function, function, function and function.

[00:05:05]
That was a lot to get through. And so then remember we're back in now setup world so this no longer exists. So honestly what I'm going to do, I'm just going to grab all of the this tasks do and then we're just going to grab them, switch them to dot value.

[00:05:25]
Then what else is erroring out? This is loading. Wait, that's not what I wanted. This error. That's what I want. And then this dot value. Excellent. This is loading. And then this is loading dot value and I think we're almost done. I think that.
>> Speaker 2: Final curly bracket.

[00:06:09]
>> Ben Hong: We have a spare curly bracket at the very bottom. Good call. Good call. And then this one. Nope, doesn't like it. Okay. This Update Tasks just becomes Update Tasks. No need for that. Save something so funky.
>> Speaker 2: At the bottom.
>> Ben Hong: This one we don't need.
>> Speaker 3: I don't think you need an extra one.

[00:06:37]
>> Speaker 2: You need your closing bracket, curly or bracket.
>> Speaker 4: Parentheses. And then bracket, maybe.
>> Speaker 3: Bracket, parentheses, the end.
>> Ben Hong: Bracket. Parentheses. Like this. Okay. Beautiful. Yeah. Right. Because we need to close this giant thing, this loop. Okay. Okay, there you go. That is everything. Now, the difference also being, right, we just switched everything over to Composition API is that then you need to go ahead and return all the things.

[00:07:08]
So this is where you have to be explicit regarding the fact that you're saying task is loading error. So now that's that. And then we have all our getters here. I'm just moving that in so I just see them. Getters. So we have what? Task count, Task by status, task by area, and then unique areas.

[00:07:39]
Yep. And then finally exposing all of these. Let me just collapse them to be a little bit easier. Create update, delete. And then some helper methods. Okay, let me do that. Actions, create, update, delete. I think those are the three. I missed something. Update. No. Yeah, yeah, yeah.

[00:08:10]
Update. Great. Finally. Yep. I'll need that comma in a second. And then these last helper methods. This is a long one. All right, what do we got? Get task by id. Get task by week. Get task by id. Great. Get task. Thank goodness for autocomplete. And then update task status.

[00:08:34]
And then update task type. Why does it duplicate? This is your setup store. You can see it's actually a little verbose just because you're setting everything manually now. That's what you get by doing the setup store. But it does mean that kind of like you're seeing here, you're able to then group things by, like, if you want, by their feature pieces.

[00:09:04]
If you really wanted, for example, like, unique areas. This one honestly doesn't really make a lot of sense. It's like a meta attribute of tasks. And so, if I were like fully refactoring this, I think this would not probably live in here because I don't see why I would want to derive all unique areas from tasks.

[00:09:20]
That seems like expensive from a computation perspective. But then it's related to here by task by area. So it's kind of interesting. So you get to like, whereas as we saw with the Options store, you have to put it in state. Getters and actions. That is the order this.

[00:09:34]
You get to start thinking how you might want to redo it. And then, more importantly, there's nothing stopping you from creating composables to make this store just more comprehensible. I know we talked about composables being often shared between components, but if they help to keep your sanity as far as, like, making your store shorter, making them easier to understand, that, to me, is valuable in its own regard.

[00:09:56]
And so, to me, that's ultimately our goal as programmers is to build things that people can easily understand and then maintain an update. And so whatever, by whatever tools you need to do that, that is what ultimately I think we should do.