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

<template>
<div>
<button @click="fetchUserInfo">Actualizar información del usuario</button>
</div>
</template>

<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...");
}
}
}
</script>

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.