Home
Jamstack Explorers
Menu

Launching with Composition API with Ben Hong

Reactive Data

In this stage, you learn how to use reactive data with the Composition API.

πŸ“š Resources

πŸ“ Transcript

00:00:03.420 --> 00:00:06.570 When using the options API, our reactive data is traditionally

00:00:06.570 --> 00:00:08.070 tracked by our data option.

00:00:09.000 --> 00:00:12.960 And so in this example, without doing any additional work, our count data

00:00:12.960 --> 00:00:14.760 will automatically be tracked by Vue.

00:00:15.540 --> 00:00:19.200 But when we're in the composition API, everything is static by default.

00:00:19.740 --> 00:00:21.900 After all, this is plain JavaScript in here.

00:00:22.620 --> 00:00:27.690 And so in order to add reactivity into our code, we need to introduce helper methods

00:00:27.690 --> 00:00:30.020 from Vue, which is a new thing in Vue 3.

00:00:31.740 --> 00:00:33.690 We'll start with the helper method, ref.

00:00:35.100 --> 00:00:38.380 To use our helper method, let's go ahead and import that from Vue.

00:00:39.420 --> 00:00:42.630 And now that we've imported our ref helper method, we can make our

00:00:42.630 --> 00:00:46.769 count reactive by passing it to the ref function as you can see here.

00:00:47.610 --> 00:00:50.790 And just like that, our account has now become a reactive data

00:00:50.790 --> 00:00:52.260 property that Vue will track.

00:00:53.040 --> 00:00:56.699 However, something about ref, which you might not expect is that

00:00:56.699 --> 00:00:59.459 accessing the value is a little bit different than you might expect.

00:01:00.089 --> 00:01:02.849 For example, if we had a function where we wanted to increment the

00:01:02.849 --> 00:01:07.650 count, your first instinct might be to prepend our account with this keyword.

00:01:08.220 --> 00:01:11.670 But remember we're in plain JavaScript, so the this context is

00:01:11.670 --> 00:01:13.410 not attached with the Vue instance.

00:01:13.740 --> 00:01:18.090 As it typically is in the options API, and so this doesn't work.

00:01:19.560 --> 00:01:22.890 On the other hand, you might try to leave it then as count plus equals one.

00:01:23.850 --> 00:01:26.310 But for those of us who have coded with JavaScript for a while, you'll know

00:01:26.310 --> 00:01:30.509 this one works either because count is a constant and cannot be changed.

00:01:31.050 --> 00:01:33.390 And so what do we need to do well?

00:01:33.660 --> 00:01:37.050 Because count is a ref you'll need to access the value of

00:01:37.050 --> 00:01:38.910 it by adding the dot value.

00:01:39.869 --> 00:01:42.360 And when you do that, this will work as expected.

00:01:42.960 --> 00:01:45.899 It's worth noting though, that you only need to do this inside of the setup

00:01:45.899 --> 00:01:47.850 function and not inside of your template.

00:01:48.419 --> 00:01:50.669 If you're feeling a little odd about this, don't worry.

00:01:50.910 --> 00:01:53.820 I have another method which might feel a little bit more intuitive.

00:01:55.139 --> 00:01:58.050 So let's talk about another helper method called reactive.

00:02:00.675 --> 00:02:02.835 Starting over with the static count property.

00:02:02.985 --> 00:02:06.385 Let's start by importing our reactive helper method from Vue.

00:02:07.005 --> 00:02:10.335 And next we'll declare a constant called state, which

00:02:10.335 --> 00:02:12.105 will receive a reactive object.

00:02:12.555 --> 00:02:15.375 And we'll go ahead and return that so that we can expose that to the

00:02:15.375 --> 00:02:18.825 template inside of this reactive object.

00:02:19.065 --> 00:02:22.545 Let's go ahead and now move our count directly inside of this.

00:02:22.995 --> 00:02:25.725 And now we can remove count from the returned object.

00:02:26.760 --> 00:02:30.210 And finally, since we're exporting state and not count, we'll need to now

00:02:30.210 --> 00:02:32.340 prepend our template with state dot.

00:02:33.000 --> 00:02:35.340 And with that, we now have a reactive count property.

00:02:36.660 --> 00:02:38.459 You might be wondering what's the difference?

00:02:39.329 --> 00:02:43.274 Well, If we go ahead and look at our increment count function from earlier,

00:02:43.304 --> 00:02:47.595 when we use ref, we have to use the dot value in order to access our account.

00:02:47.864 --> 00:02:51.375 But now that we're using a reactive object, we no longer need dot value.

00:02:51.975 --> 00:02:55.845 And so we can access our count property directly with state dot count.

00:02:56.144 --> 00:02:58.035 And this will work exactly as you expect.

00:03:00.210 --> 00:03:04.560 That's said, some of you may immediately be thinking, well, I don't like this

00:03:04.560 --> 00:03:08.280 state prepend after all this means going through the rest of the template,

00:03:08.310 --> 00:03:13.080 there'll be a lot of state dot, but don't worry, I have a solution for this.

00:03:14.490 --> 00:03:16.780 So let's talk about the helper method toRefs.

00:03:18.900 --> 00:03:23.010 As we saw earlier, we now need to prepare all of our templates with state dot.

00:03:23.280 --> 00:03:24.390 And this is an ideal.

00:03:25.215 --> 00:03:28.635 And so your first instinct might be to destructure our state object.

00:03:29.265 --> 00:03:32.655 And then as a result, you might think that we can then just say

00:03:32.685 --> 00:03:34.095 count inside of our template.

00:03:35.355 --> 00:03:38.745 However, this is not what you want to do because you end up removing

00:03:38.745 --> 00:03:41.505 reactivity from the different pieces inside of the object.

00:03:42.315 --> 00:03:43.065 Don't worry though.

00:03:43.125 --> 00:03:43.905 We're not stuck.

00:03:44.655 --> 00:03:46.845 As I mentioned at the beginning of this section, we have another

00:03:46.845 --> 00:03:48.485 helper method called toRefs.

00:03:49.215 --> 00:03:52.905 And this allows us to break up our reactor data into the individual pieces

00:03:53.235 --> 00:03:54.735 by passing it to the helper method.

00:03:55.785 --> 00:03:59.775 And now you're able to use your reactive data inside of template the way you want.

00:04:01.695 --> 00:04:04.005 Now that we understand these fundamental concepts, let's

00:04:04.005 --> 00:04:06.405 code together to follow along.

00:04:06.435 --> 00:04:09.525 Let's go ahead and check out the reactive-data-begin branch.

00:04:10.985 --> 00:04:15.645 Then let's open this up in vs code and let's open up app dot view.

00:04:17.190 --> 00:04:20.250 Inside of our file, you can see here that we have our reactive data

00:04:20.280 --> 00:04:21.780 being tracked in the data options.

00:04:22.230 --> 00:04:24.510 And so let's move that over to the composition API.

00:04:25.800 --> 00:04:28.440 And so we'll start by opening the setup method.

00:04:30.210 --> 00:04:32.670 And so we'll want to go ahead and migrate this whole object

00:04:32.670 --> 00:04:34.680 over into our setup function.

00:04:35.280 --> 00:04:36.300 So go ahead and cut that.

00:04:36.630 --> 00:04:37.650 Then we can delete this.

00:04:39.150 --> 00:04:42.210 And then what I'm going to do is I'm going to use the reactive helper method.

00:04:42.900 --> 00:04:48.590 I'm going to go ahead to the top and let's go ahead and import that import from Vue.

00:04:49.530 --> 00:04:52.440 And then here, this should help us with the auto-complete is

00:04:52.440 --> 00:04:53.730 we're looking for reactive.

00:04:53.880 --> 00:04:54.450 Perfect.

00:04:55.320 --> 00:04:59.370 And so down here now, inside of the setup function, we'll say const state

00:04:59.429 --> 00:05:03.390 equals reactive and then I'll paste that object that we just copied over.

00:05:04.155 --> 00:05:07.575 And so you can see now here that everything has been copied over correctly.

00:05:09.675 --> 00:05:12.285 So we need to remember is that we need to actually return the

00:05:12.285 --> 00:05:13.515 data that we want to expose.

00:05:13.515 --> 00:05:17.935 So in this case it would be state, but we want to also use to help helper

00:05:17.935 --> 00:05:19.215 method that we learned about earlier.

00:05:19.395 --> 00:05:24.285 So let's go ahead and add toRef as well to our imports.

00:05:24.975 --> 00:05:29.545 And then down here, we'll go ahead and destructure it with toRefs.

00:05:31.544 --> 00:05:34.184 And so now everything should work as expected.

00:05:35.804 --> 00:05:39.015 And when we jump into our browser, we'll see that we have no errors

00:05:39.075 --> 00:05:44.775 inside of our console page and no errors inside of our terminal.

00:05:46.289 --> 00:05:48.720 If you want to practice creating reactive data on your own.

00:05:48.990 --> 00:05:50.610 I present you with this coach challenge.

00:05:51.030 --> 00:05:54.360 Go ahead and check out the reactive data challenge branch, and use

00:05:54.360 --> 00:05:58.500 the composition API to manage data inside a password game dot view.

00:05:58.919 --> 00:05:59.429 Good luck.

00:05:59.580 --> 00:06:01.960 And I'll see you in the next video where we're going to talk about computed

00:06:01.980 --> 00:06:04.049 properties inside of the composition API.

Explorers

your progress

49