Composition Solution

[00:00:00]
>> All right. Welcome back, everyone. So hopefully you found the challenge. Again, it probably took a little bit of time to get used to. And so as far as just building out the features that we talked about, want to go ahead and do that together. And so the first thing we talked about is, once you've wired up the account, right, you see something changing.

[00:00:19]
We want to be able to actually modify what that property is or sort of how much we're incrementing by And so, typical view, we'd go ahead and say like an input type, and this case, I'll just call it number. And we would want to attach it to a V model called like, change amount for example.

[00:00:38]
And so here what we can do then inside of our setup function is to then define a setup. Sorry change amount variable. In this case, let's just call this two and then we will expose it to our template. Some of you probably already seeing something funny. So it works right in terms of like we see it here and it's updating there.

[00:01:04]
So it's taking the value. But some of you as you might have guessed, it is not reactive right now. So just for practicing, we're gonna go ahead and make this a ref. So you can see now that, for example, actually, just to make sure that, to show you that this is not reactive, I can go ahead and expose change amount here.

[00:01:24]
And so here we go, we have the two here, But then when I go ahead and increment this, you'll see that nothing is changing on this side. Because right now it's just a stat. It's just a number. And so what we're going to do then is we're going to go ahead and import our ref.

[00:01:39]
From wrong place. Import ref, because we want to be a reactive reference the site the way you can try to remember it. Reactive reference from view. And then, I'm just gonna wrap it like this in this case. And so now when I save, you can see now that when I increment this now it actually changes.

[00:01:59]
And so here you can actually see this is a probably a good example where ref is actually nice. In terms of like, we just need a reactive primitive in this case, there's a number, we're not really doing much with it from like a, like computation standards where we have to use a lot of values and unpack work and get a little bit hairy.

[00:02:17]
And so, by doing it like this, you can see that now everything's reactive. We ca Change this increments. And then we can do then is increment count. For example, if we wanted to integrate this into our like composition API, it would basically take an amount as a parameter, which we could default to one.

[00:02:40]
I believe that should work. And so then it should be plus equals amount. So save. Okay, increment count. Yep. So hang on a sec might have to separate this. So let me just do new increment. Count is equal to increment count with a value of 2. Right? You increment count.

[00:03:05]
This passed great and then we should when it's clicked let's just logout the amount, live debugging it does not like something, really doesn't like something, okay refresh now Okay, I think that's because the mouse event is being passed in. So the idea here is then we have the change amount here, then we can, interesting that it's not letting me pass it through, but we would theoretically, again, if this were, we had again this our new increment count.

[00:03:43]
We could go ahead and then just pass it. Change amount. I wonder if that's why. Change amount value for example, and then wait this is a function sorry. That then takes current count Dot value and adds it to change amount dot value. So with new increment count attached to our button, increment is assigned, but never used.

[00:04:19]
Yep. I can delete that. So I'm pretty sure I needed the factory generator for that. But we don't worry too much about this, but you can see here. But if I change it now it is no most their ,fee model number. I'm sure some of you caught that already.

[00:04:34]
So update to works back up to five. And we're good. As you can see here, there's still a lot of lessons learned as far as composition API and how it will be used. And so this is why at the moment in terms of, Design patterns and best practices.

[00:04:49]
Those are sort of still up to the community to try out the composition API and see just how far that they can basically push it and see like what makes sense and what doesn't over the long term.