Reactividad de Vue y uso de funciones - 16

▶

Vamos a aprovechar esta parte para modularizar un poquito el código. Aunque realmente no haría mucha falta modularizar, ya que es una aplicación muy pequeña, perfectamente lo podríamos dejar como está. Sin embargo, ya que estamos en esto, podemos aprovechar para aprender otras cositas de Vue, en este caso el uso de los métodos, que hasta ahora no lo hemos tocado.

Fíjate que esto va como por bloques.
Aquí tenemos, como quien dice, la primera opción, que es el método o función created, el cual se ejecuta cuando se monta el componente, es decir, cuando se invoca:

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: ''
        }
    },

Luego, tenemos el bloque de data.
Y al igual que esos bloques, también podemos colocar el de métodos (methods):

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

El orden no importa, puedes colocarlo adelante o después.

Usualmente yo lo organizo colocando primero el created (ya que es lo primero que se ejecuta) y luego data, y después los métodos y demás cosas que iremos conociendo poco a poco.

Vamos a crear entonces el primer método. Le voy a colocar el nombre getMovies, por ejemplo, y ahí lo tenemos. Para colocar otro método, simplemente agregas una coma, le cambias el nombre, y así seguimos. Pero en este caso, con uno es suficiente. Ahí colocamos la lógica y la data que nos trajimos.

Por cierto, fíjate que da un error si usamos await sin async, así que tenemos que declarar el método como async. Y si usamos await, recuerda que necesitas también colocar this para acceder a las propiedades y métodos del componente.

Recuerda que, como te comentaba antes, para usar cualquier variable, función o método dentro del bloque <script>, sí o sí tienes que usar this. Si no, te va a lanzar un error como este que ves en la consola, indicando que no reconoce getMovies.

Una vez lo colocas con this, como si fuera una clase, todo empieza a funcionar.
Voy a recargar para que desaparezca el error, y ahí puedes ver que ahora sí funciona correctamente.

Reactividad en Vue: demostración práctica

Entonces, ¿qué era lo que quería mostrarte aquí?
Era justamente la parte de la reactividad en Vue.

Voy a colocar una función llamada setTimeout como ejemplo:

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

Después de 5 segundos, se va a ejecutar esta función y va a asignar nuevos valores a this.movies.

Con este ejemplo puedes ver claramente cómo funciona la reactividad en Vue:
Al pasar de un array vacío a uno lleno con registros, automáticamente se actualiza la vista. No tenemos que hacer absolutamente nada más.

Eso es, como quien dice, la magia de este tipo de frameworks. Y es una de las grandes ventajas de Vue.
Vue detecta automáticamente los cambios en las propiedades definidas dentro del bloque data, y actualiza cualquier parte de la interfaz que las esté utilizando.

¿Qué es ref y por qué no lo estamos usando?

En algunos ejemplos del curso seguro viste la palabra ref.
Esto tiene que ver con otra forma de trabajar en Vue, usando la Composition API, donde ref se usa para declarar variables reactivas.

En nuestro caso, estamos usando la Options API, y ahí no hace falta usar ref, ya que Vue asume que todo lo que se declare en data es reactivo.

Por ejemplo:

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

Cualquier cambio que hagamos a movies, Vue lo va a detectar y actualizar automáticamente cualquier parte de la interfaz que lo esté usando.

En cambio, si estuviéramos trabajando con una variable local normal de JavaScript, tendríamos que hacer todo manualmente:
Usar document.getElementById, seleccionar elementos con querySelector, y actualizar el DOM a mano cada vez que los datos cambian, como lo hacíamos con jQuery.

Pero aquí con Vue, no hay que hacer eso. Gracias a la reactividad, Vue se encarga de todo.