Watchers en Vuejs 2, ejemplo con Vuex

Watchers en Vuejs 22
Los watchers en Vuejs 2 son observadores que nos permiten realizar cambios en nuestra aplicación cuando algún dato ha cambiado en nuestro componente.

Un ejemplo práctico que he utilizado en alguna ocasión es trabajando con Vuex, ya que aunque es cierto que los datos están a nivel global, no hay nada que pueda disparar un método de un componente, y para ese caso juegan un gran papel los watchers.

Uso de Watchers en Vuejs 2 y Vuex

Para entender bien el caso, vamos a crear un ejemplo bastante completo, donde tendremos un módulo con Vuex, un componente y un watcher para observar un getter de nuestro módulo.

Vuejs 2 y Vuex desde 0

¿Todavía no conoces Vuejs 2 y Vuex?, en cursosdesarrolloweb.es tienes un curso completo para aprender a trabajar con Vuejs 2 y Vuex utilizando las últimas versiones con ejemplos fáciles y útiles.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.

Desarrollar un módulo con Vuex

Lo primero que vamos a hacer es crear un módulo para poder tener algunos datos en una store.

Aquí simplemente tenemos una acción que dispará una mutación haciendo uso de commit y establece el estado para username, además, tenemos un getter para acceder con mapGetters a nuestros datos más adelante.

Desarrollar un componente con Vuex utilizando watchers

Ahora vamos a crear un sencillo componente donde utilizaremos mapActions y mapGetters para poder disparar la acción fetchUserInfo, de este modo se ejecutará también la mutación [types.SET_USER] y a su vez el estado username será actualizado, con lo cual nuestro watcher se disparará y podremos hacer lo que necesitemos.

Aunque los Watchers en Vuejs 2 son una poderosa herramienta, también es cierto que no es bueno utilizarlos en exceso ya que repercuten de forma directa en el rendimiento de nuestra app, así que sólo úsalos cuando no tengas otra alternativa, siempre que puedas haz uso de computed.

Espero que te haya parecido interesante y lo puedas aplicar en tus proyectos.

Añade un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies
Nuevo Curso de Vuejs 2 Avanzado con Vuex y AdonisJs 4Acceder ahora
+ +