Vue Reactivity and Function Usage - 16

▶

Let's take advantage of this part to modularize the code a little. Although there really isn't much need to modularize, since it's a very small application, we could easily leave it as is. However, while we're at it, we can take advantage of the opportunity to learn other things about Vue, in this case, how to use methods, which we haven't touched on so far.

Note that this works in blocks.
Here we have, so to speak, the first option, which is the created method or function, which is executed when the component is mounted, that is, when it is invoked:

export default {
    created() {
        // axios.get('http://code4movies.test/api/pelicula')
        //     .then(res => this.movies = res.data)
        //     .catch(error => console.log(error))

        this.getMovies();
    },
    data() {
        return {
            movies: [],
            confirmDeleteActive: false,
            deleteMovieRow: ''
        }
    },

Next, we have the data block.
And just like those blocks, we can also add the methods block:

methods: {
 getMovies() {
   // código aquí
 }
}

The order doesn't matter; you can put it in front or after.

I usually organize it by putting the created method first (since it's the first thing executed), then the data, and then the methods and other things we'll learn little by little.

So let's create the first method. I'll name it getMovies, for example, and there we have it. To add another method, simply add a comma, change the name, and so on. But in this case, one is enough. That's where we put the logic and data we brought over.

By the way, note that it throws an error if we use await without async, so we have to declare the method as async. And if we use await, remember that you also need to include this to access the component's properties and methods.

Remember, as I mentioned before, to use any variable, function, or method within the <script> block, you absolutely must use this. Otherwise, you'll get an error like the one you see in the console, indicating that getMovies isn't recognized.

Once you add it with this, as if it were a class, everything starts working.
I'll reload it to make the error disappear, and you can see that it's now working correctly.

Reactivity in Vue: practical demonstration

So, what was it I wanted to show you here?
It was precisely the reactivity part in Vue.

I'll use a function called setTimeout as an example:

setTimeout(() => {
 this.movies = [...]; // nuevos datos
}, 5000);

After 5 seconds, this function will execute and assign new values ​​to this.movies.

This example clearly shows how reactivity works in Vue:
When you go from an empty array to one filled with records, the view is automatically updated. We don't have to do anything else.

That's, so to speak, the magic of this type of framework. And it's one of Vue's great advantages.
Vue automatically detects changes to properties defined within the data block and updates any part of the interface that uses them.

What is ref and why aren't we using it?

You've probably seen the word ref in some examples in the course.
This has to do with another way of working in Vue, using the Composition API, where ref is used to declare reactive variables.

In our case, we're using the Options API, and there's no need to use ref, since Vue assumes that everything declared in data is reactive.

For example:

data() {
 return {
   movies: []
 };
}

Any change we make to movies, Vue will detect it and automatically update any part of the interface that uses it.

On the other hand, if we were working with a normal local JavaScript variable, we would have to do everything manually:
Use document.getElementById, select elements with querySelector, and update the DOM manually every time the data changes, just like we did with jQuery.

But with Vue, you don't have to do that. Thanks to reactivity, Vue takes care of everything.