Validar Props con Vuejs 2
Validar Props con Vuejs 2
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


En este tutorial vamos a desarrollar una lista de tareas con Vue.js 2 y Vuex de forma completa añadiendo filtros para mostrar la información filtrada.

Una lista de tareas es la mejor forma de entender cómo funciona una store o almacén de datos, sea con Vuex, Flux o Redux, al final todos hacen algo muy parecido, que es manejar el estado de nuestra aplicación para que sea algo muy sencillo.

A lo largo de este tutorial vamos a ver algo nuevo llamado mapMutations que nos ofrece un atajo para ejecutar las mutaciones de nuestra store desde nuestros componentes.

TodoApp con Vue.js 2 y Vuex

Aquí tienes la aplicación una vez finalizada, que no es más que uno de los ejemplos que nos ofrece Vuex desde su repositorio.



Cómo puedes ver, tenemos una caja de texto desde donde vamos a poder añadir nuevas tareas, una vez añadamos una nueva tarea aparecerán en el listado un poco más abajo con la propiedad done (hecho) en false, si marcamos si correspondiente checkbox, esta tarea pasará a estado completado, los 3 botones azules que aparecen nos servirán para decirle a Vuex qué tareas queremos mostrar dependiendo de la propiedad done.


Seguro que esa imagen te aclara todo lo anterior, si te interesa instalar Vue-devtools simplemente sigue los pasos de su repositorio y tendrás la extensión habilitada en chrome de forma muy sencilla.

Definir las mutaciones de nuestra lista de tareas

Cómo ya sabemos, las mutaciones nos permiten modificar el estado de nuestra aplicación, por lo tanto vamos a definir un archivo de mutaciones que después pasaremos a nuestra store.

Ahora vamos a pasar las mutaciones a nuestra store desde el archivo main.js.

El Componente Todo

Ahora vamos a desarrollar un componente llamado Todo que representará la lógica de cada todo y será utilizado en un loop desde el componente Todos.

Lo único que nos debería llamar la atención si hemos revisado los tutoriales anteriores de Vue.js 2 es mapMutations, de esta forma creamos atajos, es decir, en lugar de tener que escribir cada vez this.$store.commit(‘deleteTodo’), podemos escribir directamente this.deleteTodo.

Componente Todos para mostrar la lista de tareas

Ahora que ya tenemos un componente que representa cada todo, simplemente debemos crear un nuevo componente para que muestre el listado de todos, así que vamos a crear el componente Todos con el siguiente código.

Cómo puedes ver, aquí es donde se utilizan los filtros, el componente Todo y todas las operaciones a nivel global.

La constante filters recibe los todos y devuelve todos éstos dependiendo de la propiedad visibility del componente, que por defecto es todos.

Dentro de computed puedes ver que tenemos filteredTodos, que es desde donde se utilizan los filtros y a su vez es lo que utilizamos en el v-for para recorrer los todos.

El resto es más de lo mismo, así que te invito a que lo revises, hagas tus pruebas y saques conclusiones, espero que te haya parecido útil la entrada sobre Vue.js 2 y Vuex.