All language subtitles for 004 Composition API - Data (refs) & Methods_en

Let's set up a reactive data variable for our counter.

Now in the composition API, there are two main types of reactive data.

We have refs and reactive objects.

I'll get into these in more detail later on in the course.

But basically a reactive object allows us to create an object of data with a bunch of related data properties

inside that object.

Whereas a ref is generally used for simple single items of data such as a string, an array or a number.

So it makes sense to use a ref for this.

So to set up a graph, we can just create a constant and give it a name.

Whatever name we use will be the name that's available in the template.

So we're going to call this counter since that's the name we've used in our template here, and we want

to set that equal to the ref method like this, and then we can pass our initial value inside this method.

So let's set that to zero initially because we using this method, we need to import this method from

view so above our export, we need to import ref from view.

Now this counter ref is not available in our template yet.

We also need to return it when we're using the setup function pattern.

So right to the bottom of our setup function, we need to add a return statement on this return statement

should always stay at the bottom of the setup function and then we just need to return this counter

ref like this and save that and hopefully this counter should be hooked up.

Now we can see zero on the page.

If we change the value of this ref and save it, we can see it's updated on the template.

We're going to set this back to zero and save that.

Okay.

We now need to add decrease counter and increase counter methods on the way we do.

This is just by creating some named functions anywhere within this setup function and then we need to

return them just like we return this counter.

So let's create a method for increasing the counter so we can either do this like this with the function

keyword.

So function increase counter, or we can do a constant named increase counter, which we set equal to

a function like this, which is the method that I usually use.

So all we want to do is increase this counter ref by one and you might think we'd be able to just do

counter plus plus.

But actually this won't work with the composition API because when we create a ref they actually creates

an object and the value of our ref is stored in a property called value.

So to access this we actually need to do counter value and we can then do plus plus.

And again in order to use this method in our template, we need to return it so we can just added to

this return object like this increase counter since we already have a click color here which is firing

the same method and this should work.

So I'll save that click on the plus button and that's working.

So now we just need to create the decrease counter method.

So I'll duplicate this increase counter method, rename it to decrease counter and just change the plus

plus to minus minus so that it decreases the accounts of value by one.

And again, we need to return this.

So we'll add it to our return statement down here, decrease counter, save that and hopefully both

buttons should be working.

And yeah, everything is working.