VueJS: Testeando nuestros stores

broken-clay-close-up-838981.jpg

Hemos visto cómo configurar nuestro proyecto para que pueda ser testeado, hemos creado nuestro primeros test sobre componentes de VueJS y hemos jugado con diferentes tipos de componentes y complejidades, desde componentes que tenían dependencias hasta componentes que solo eran visuales.

Nos queda para terminar esta sería, ver cómo somos capaces de testear nuestros stores. Si recordamos, los stores son aquellas piezas de código que configuraban vuex  y que nos permitían gestionar el estado global de nuestra aplicación en pequeños estancos bien modularizados y abstraídos.

Tenemos que ver las aproximaciones que podemos llevar a cabo y cómo probar cada uno de los elementos. Vayamos al lío:

Read More

Anuncios

VueJS: Los módulos en vuex

Al igual que pasa con nuestra aplicación, cuando un store empieza a crecer demasiado, empieza a ser bastante inmanejable gestionarlo todo en un único fichero. Como vuex presenta una solución donde se gestiona todo el estado en único objeto, tenemos que pensar una forma para poder modularizar, pero a la vez seguir teniendo esta estructura en árbol único.

vuex cuenta con una funcionalidad que nos va a permitir dividir nuestro árbol de datos en módulos más específicos que contarán cada uno de ellos con todo lo necesario para gestionar estas porciones.

Read More

VueJS: Las mutaciones y acciones en vuex

Con el post anterior, tenemos la mitad del flujo de vuex explicado. Ya somos capaces de obtener estados de nuestro store global y de crear reacciones en los componentes a partir de esto.

Lo siguiente que tenemos que tener en cuenta es cómo poder manipular estos estados para que se conviertan y muten en aquello que necesitamos, ya sea por la interacción del usuario, como por los eventos que se encuentran registrados en mi aplicación.

Para conseguir esto, vamos a explicar las dos funcionalidades que nos permiten esto y que, como veremos, tiene muchas similitudes a como lo hacen otras librerías como redux.

Read More

VueJS: Los estados y getters en vuex

Una vez que hemos visto cómo incluir vuex en nuestra aplicación, es momento de explicar los conceptos básicos de la librería.

En el posts de hoy, dedicaremos tiempo a contar cómo podemos almacenar el estado dentro del store . Veremos cómo con muy poco de código podremos crear datos accesibles para varios componentes.

También repasaremos un concepto bastante interesante denominado getters que nos permitirán crear consultas más específicas sobre los datos que nos interesan para cada componente.

Read More