Introducción a Vue CLI UI

Banner Vue CLI UI

Una de las características más interesantes de la versión 3 de Vue CLI es Vue UI, una interfaz gráfica que permite crear, actualizar y administrar cada aspecto de nuestros proyectos. En este tutorial exploraremos esta nueva característica y aprenderemos a generar nuestros proyectos directamente desde dicha interfaz.

Ver post

Pruebas con plugins: uso de localVue y mocks con vue-test-utils

Vue Testing

Cuando utilizamos librerías de terceros, como puede ser vue-router, necesitamos interactuar con propiedades de estos plugins en nuestros componentes. Para tener acceso a ellos debemos decirle a Vue que los use. En esta lección explicaremos la importancia de usar localVue en lugar de la instancia general de Vue a la hora de probar los plugins. También cómo podemos sustituir estas propiedades usando el objeto mocks de la configuración.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Uso de selectores en JavaScript

Javascript selectors

El uso de “selectores” en JavaScript permite encontrar y seleccionar elementos del DOM bien sea para extraer información de cada nodo o para manipularlos de ser necesario.

Estos selectores funcionan de forma  muy similar a los selectores que se usan en CSS, como veremos a continuación:

Ver post

Manejo de acciones asíncronas con promesas en Vuex

Vuex

En esta lección vamos a explorar un poco más sobre el uso de acciones en Vuex y su naturaleza asíncrona. Para ello vamos a continuar practicando sobre el uso de Promesas en JavaScript y veremos los enfoques optimista y pesimista que podemos elegir cuando desarrollemos aplicaciones que deban enviar y recibir datos a un servidor a través de AJAX.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Uso de Promesas en JavaScript

Vuex

Las Promesas de ES6 son una alternativa a las funciones callback cuando requerimos una manera de manejar solicitudes asíncronas en JavaScript. Las Promesas nos permiten definir las acciones que deben ejecutarse una vez que la operación definida dentro de la Promesa finalice con éxito o con error. En el siguiente video veremos una introducción al tema de las promesas y de las operaciones asíncronas, la cual será muy útil cuando regresemos a Vuex.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Integrando Vuex en una SPA con Vue.js 2

Vuex

En esta lección vamos a comenzar a integrar Vuex en nuestro proyecto de Single-page Application (SPA) con vue-router. Para ello vamos a reemplazar la versión manual del Store que creamos en lecciones anteriores con una implementación de Vuex y además del State, los getters y las mutaciones que ya vimos en lecciones anteriores, en esta lección también daremos nuestro primer vistazo a las acciones de Vuex.

Regístrate para ver ésta y cientos de lecciones exclusivas.

Introducción a Vuex: Integración con Vue.js y helpers

Vuex

En esta lección continuaremos aprendiendo sobre Vuex, esta vez veremos cómo podemos integrar nuestro Store con Vue.js y también algunos de los helpers y métodos que podemos utilizar para simplificar y evitar la repetición de código dentro de nuestros componentes (como por ejemplo el uso de los métodos mapState y mapMutations).

Regístrate para ver ésta y cientos de lecciones exclusivas.

Introducción a Vuex: la solución

Vuex

En la lección anterior pudimos apreciar el problema que se presenta cuando necesitamos compartir o modificar datos entre muchos componentes y cómo resolverlo con el uso de eventos. Pero en esta lección veremos otro enfoque para resolver este problema: Vuex. Con Vuex podremos centralizar el manejo de estado y la modificación del mismo en una sola parte que nuestra aplicación, que llamaremos Store. Dentro del Store vamos a encapsular los datos de nuestra aplicación (llamados “State” o “estado”) y los métodos que harán posible modificar dicho estado (llamados “Mutations” o “mutaciones”).

En el siguiente video vamos a instalar Vuex, a configurarlo y utilizarlo en nuestro proyecto de ejemplo:

Regístrate para ver ésta y cientos de lecciones exclusivas.

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.