Obtención de datos

Ameth Ordoñez Erazo

Estudiante

Si están utilizando el compositión API:

Pueden usar la herramienta que nos provee Vue llamada watchEffect(), que básicamente nos permite generar un watcher común y corriente, pero que se genere desde el primer renderizado del componente, sin esperar que cambie el valor de la propiedad observada. Es decir, hacer lo mismo que hacer la opción {inmediate: true} en el options API:

import { watchEffect } from "vue";

watchEffect(() => {
  console.log("params", route.params);
});

Edwin Jesús

Estudiante

O sea que la única diferencia es que se ejecuta la primera vez para tomar los valores sin que la variable que está siendo observada cambie, verdad? pero si llegase a cambiar se lanza de nuevo

Ameth Ordoñez Erazo

Estudiante

@babbage Si, efectivamente cuando vuelve a cambiar sigue observando los cambios. Aunque esta no es la única diferencia entre watchEffect y watch, tambien está que puede observar a nivel profundo en los objeto de estado de tipo ref y reactive. Mira la documentación en la página de Vue para más información.

Zoila Yaneth Villatoro Garcia

Estudiante

Les dejo el codigo con Composition API

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const chats = ref([]);

const route = useRoute();

watch(
  () => route.params,
  (val) => {
  console.log('update params en chatsview', val);
  chats.value = [
    {
      id: 1,
      name: 'Ximena'
    },
    {
      id: 2,
      name: 'Juan'
    },
    {
      id: 3,
      name: 'Pedro'
    }
  ]
}, { immediate: true })

Felix Torres Javier Antonio

Estudiante

Les dejo el código, de la lección, por si tienes errores o no funciona, lo puedas comparar y analizar.

export default {
  data() {
    return {
      chats: [],
    };
  },
  created() {
    this.$watch(
      () => this.$route.params,
      (val) => {
        console.log("UpDATE PARMAS", val);
        this.chats = [
          { id: 1, name: "Ximena" },
          { id: 2, name: "Javier" },
          { id: 3, name: "Teresita" },
          { id: 4, name: "Jorge" },
          { id: 5, name: "Ramiro" },
        ];
      },
      { immediate: true }
    );
  },
};

George M

Estudiante

Hola, porque se utiliza el $ delante de watch en this.$watch y en this.$route? saludos

Diana Martinez

Estudiante

Porque Vue usa $ para referirse a propiedades internas de un objeto, en el caso de $watch, del objeto JS que representa el componente, y en el caso de $route, el objeto de JS que representa la ruta.

Si están utilizando el compositión API:

Pueden usar la herramienta que nos provee Vue llamada watchEffect(), que básicamente nos permite generar un watcher común y corriente, pero que se genere desde el primer renderizado del componente, sin esperar que cambie el valor de la propiedad observada. Es decir, hacer lo mismo que hacer la opción {inmediate: true} en el options API:

import { watchEffect } from "vue";

watchEffect(() => {
  console.log("params", route.params);
});

O sea que la única diferencia es que se ejecuta la primera vez para tomar los valores sin que la variable que está siendo observada cambie, verdad? pero si llegase a cambiar se lanza de nuevo

@babbage Si, efectivamente cuando vuelve a cambiar sigue observando los cambios. Aunque esta no es la única diferencia entre watchEffect y watch, tambien está que puede observar a nivel profundo en los objeto de estado de tipo ref y reactive. Mira la documentación en la página de Vue para más información.

Les dejo el codigo con Composition API

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const chats = ref([]);

const route = useRoute();

watch(
  () => route.params,
  (val) => {
  console.log('update params en chatsview', val);
  chats.value = [
    {
      id: 1,
      name: 'Ximena'
    },
    {
      id: 2,
      name: 'Juan'
    },
    {
      id: 3,
      name: 'Pedro'
    }
  ]
}, { immediate: true })

Les dejo el código, de la lección, por si tienes errores o no funciona, lo puedas comparar y analizar.

export default {
  data() {
    return {
      chats: [],
    };
  },
  created() {
    this.$watch(
      () => this.$route.params,
      (val) => {
        console.log("UpDATE PARMAS", val);
        this.chats = [
          { id: 1, name: "Ximena" },
          { id: 2, name: "Javier" },
          { id: 3, name: "Teresita" },
          { id: 4, name: "Jorge" },
          { id: 5, name: "Ramiro" },
        ];
      },
      { immediate: true }
    );
  },
};

Hola, porque se utiliza el $ delante de watch en this.$watch y en this.$route? saludos

Porque Vue usa $ para referirse a propiedades internas de un objeto, en el caso de $watch, del objeto JS que representa el componente, y en el caso de $route, el objeto de JS que representa la ruta.

Obtención de datos

Introducción

Introducción a Vue Router

Setup inicial

Definición de rutas

Definición de rutas

Parámetros

Rutas anidadas

API de navegación

Navegación programática

Rutas con nombre

Redirección y alias

Componentes y props

Modos de historia

Navegación avanzada

Guardas de navegación

Rutas con metadatos

Obtención de datos

Composition API

Coincidencia de rutas

Rutas dinámicas

Despedida

Despedida del curso