Watchers con Vuex, interactuar con la Store

En muchos casos necesitarás saber si algún dato de la tienda de Vuex ha cambiado para actuar en consecuencia. Para conseguir esta funcionalidad podemos utilizar distintas vías, pero dependiendo de cómo lo hagamos podemos tener problemas de rendimiento que notaremos en nuestras aplicaciones.

Una forma que personalmente no recomiendo sería hacer lo siguiente:

 

El motivo es que dependiendo de las operaciones que necesitemos hacer podemos terminar aparte de con problemas de rendimiento con un bucle infinito.

Las siguientes soluciones son las que yo personalmente sí recomiendo ya que están diseñadas justamente para interactuar con Vuex utilizando Watchers.

Utilizar el Hook Mounted con el Watcher de Vuex

La primera forma que recomiendo sería hacer lo siguiente en cualquier de nuestros componentes:

 

Con eso nuestro problema quedaría solucionado de un plumazo, Vuex tiene la función watch que nos permite saber qué está sucediendo en nuestra tienda.

Aplicar con computed, mapState y watchers

Otra opción perfectamente funcional sería utilizar computed properties, mapState y watchers de la siguiente forma:

 

En cualquiera de los casos sabremos qué está pasando en el state isLogged y podremos actuar en consecuencia, que es lo que estábamos buscando.

Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register