Watchers En Vuejs 2, Ejemplo Con Vuex.docx

Watchers en Vuejs 2, ejemplo con Vuex

1 de 2

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.

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.

//module.js import Vue from 'vue' import * as types from '../mutation_types' const testModule = { state: { username: null }, actions: { fetchUserInfo ({commit}) { commit(types.PENDING); return new Promise((resolve) => { commit(types.SET_USER, 'Unodepiera'); resolve('Unodepiera'); commit(types.NOT_PENDING); }); } }, mutations: { [types.SET_USER]: (state, response) => { state.username = response; // Unodepiera } }, getters: { username: (state) => { return state.username; } } } export default testModule

Watchers en Vuejs 2, ejemplo con Vuex

2 de 2

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.

//component.vue <script> import {mapGetters, mapActions} from 'vuex'; export default { name: "my-component", methods: { ...mapActions([ 'fetchUserInfo' ]), }, computed: { ...mapGetters([ 'username' ]) }, watch: { username (newUsername, oldUsername) { //atentos a cambios en el getter username console.log("username actualizado, podemos hacer cambios..."); } } } 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.