Obtención de datos
Contenido del curso
Obtención de datos
Contenido del curso
Ameth Ordoñez Erazo
Edwin Jesús
Ameth Ordoñez Erazo
Zoila Yaneth Villatoro Garcia
Felix Torres Javier Antonio
George M
Diana Martinez
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.
