- Notifications
You must be signed in to change notification settings - Fork0
Curso-VUE/4-vue-crud-todos
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
- Crear y levantar un servidor fake con json-server
- Instalación de dependencias
- Explicación del proyecto y el router de vue
- Desarrollar plugins para utilizar las dependencias instaladas
- Iniciar módulo TODOS, definir estado, getters y mutaciones
- Consumir la API utilziando vue-axios a través de acciones
- Vistas, rutas y modificar el componente APP con la nueva navecación
El servicio json-server permite crear una api fake a la que podamos hacer peticiones.
Creamos una archivojson-server/db.json con el siguiente contenido:
{"todos": []}Levantamos el servidor con el comando
json-server --watch db.jsonPara este proyecto utilizaremos los siguientes plugins/librarías:
Las instalamos mediante el siguiente comando:
npm i axios vue-axios bootstrap-vue vuelidateAl inticar en Vue UI que vamos a utilizar el router de vue, se ha generado una carpetaviews que incluirá las distintas páginas de la aplicación y un archivorouter.js.
El archivorouter incluye las distintas rutas que va a tener la aplicación y cada ruta apunta a una de las páginas deviews.
El router permite cargar las rutas de forma estática:
importHomefrom'../views/Home.vue'constroutes=[{path:'/',name:'Home',component:Home}]
O de forma dinámica:
constroutes=[{path:'/about',name:'About',component:()=>import(/* webpackChunkName: "about" */'../views/About.vue')}]
Eliminamos el componente HelloWorld y todas sus referencias.
En el componente principalApp.vue podemos ver en el template que aparece la configuración para la barra de navecacion (router-link) y la etiqueta que carga las vistas (router-view).
<template><divid="app"><divid="nav"><router-linkto="/">Home</router-link> |<router-linkto="/about">About</router-link></div><router-view/></div></template>
Creamos una carpetasrc/plugins con los siguientes archivos:
- vue-axios.js
importVuefrom'vue';importaxiosfrom'axios';importVueAxiosfrom'vue-axios';constbaseURL='http://localhost:3000';axios.defaults.baseURL=baseURL;Vue.use(VueAxios,axios);
- vuelidate.js
importVuefrom'vue';importVuelidatefrom'vuelidate';Vue.use(Vuelidate);
- bootstrap-vue.js
importVuefrom'vue'import{BootstrapVue}from'bootstrap-vue'import'bootstrap/dist/css/bootstrap.css'import'bootstrap-vue/dist/bootstrap-vue.css'Vue.use(BootstrapVue)
- index.js
require('./bootstrap-vue');require('./vue-axios');require('./vuelidate');
Creamos el directoriosrc/modules y en su interior los archivos en donde configuraremos state, actions, mutations y getters. Incluimos unindex.js para importar estos archivos:
importstatefrom'./state';import*asmutationsfrom'./mutations';import*asactionsfrom'./actions';import*asgettersfrom'./getters';exportdefault{namespaced:true, state, mutations, actions, getters}
Establecemos el estado que tendrá este módulo:
exportdefault{todos:[],selectedTodo:null,error:false,errorMessage:''}
Utilizaremos los getters para obtener listas de tareas filtradas por su estado.
exportfunctionpending(state){returnstate.todos.filter(todo=>!todo.done);}exportfunctiondone(state){returnstate.todos.filter(todo=>todo.done);}
Definimos las funciones que alterarán los datos del estado:
exportfunctionsetTodos(state,todos){state.todos=todos;}exportfunctionsetTodo(state,todo){state.selectedTodo=todo;}exportfunctionupdateTodoStatus(state,payload){consttodo=state.todos.find(t=>t.id===payload.id);if(todo){todo.done=!todo.done;}}exportfunctiontodosError(state,payload){state.error=true;state.errorMessage=payload;state.todos=[];}
En el archivosrc/todos/actions.js las distintas llamadas asíncronas que realizará la aplicación:
- Obtener la lista de tareas:
importVuefrom'vue';exportasyncfunctionfetchTodos({commit}){try{const{ data}=awaitVue.axios({url:'/todos'})commit('todos/setTodos',data,{root:true})}catch(error){commit('todos/todosError',error.message,{root:true})}finally{console.log('La petición para obtener los datos ha finalizado.')}}
- Crear una tarea:
exportasyncfunctionaddTodo({commit},todo){try{awaitVue.axios({method:'POST',url:'/todos',data:{id:Date.now(),text:todo.text,done:false}})}catch(error){commit('todos/todosError',error.message,{root:true})}finally{console.log('La petición para crear un todo ha finalizado.')}}
- Actualizar una tarea:
exportasyncfunctionupdateTodo({commit},todo){try{awaitVue.axios({method:'PUT',url:`/todos/${todo.id}`,data:{id:todo.id,text:todo.text,done:todo.done}})}catch(error){commit('todos/todosError',error.message,{root:true})}finally{console.log('La petición para crear un todo ha finalizado.')}}
- Actualizar el estado de una tarea:
exportasyncfunctionupdateTodoStatus({commit},todo){try{awaitVue.axios({method:'PUT',url:`/todos/${todo.id}`,data:{id:todo.id,text:todo.text,done:!todo.done}})}catch(error){commit('todos/todosError',error.message,{root:true})}finally{console.log('La petición para actualizar el estado de un todo ha finalizado.')}}
- Eliminar una tarea:
exportasyncfunctionremoveTodo({commit, dispatch},id){try{awaitVue.axios({method:'DELETE',url:`/todos/${id}`})dispatch('fetchTodos')}catch(error){commit('todos/todosError',error.message,{root:true})}finally{console.log('La petición para actualizar el estado de un todo ha finalizado.')}}
Dispatch permite lanzar otra acción, en este caso para volver a obtener la lista de tareas una vez eliminada una de ellas.
Por último sólo nos falta cargar el módulo en elstore, que quedaría de la siguiente manera:
importVuefrom'vue'importVuexfrom'vuex'importtodosfrom'../modules/todos'Vue.use(Vuex)exportdefaultnewVuex.Store({modules:{ todos}})
Eliminamos los archivos por defecto de las vistas y creamos tres vistas nuevas:
- Todos.vue
- TodoCreate.vue
- TodoUpdate.vue
Por el momento, simplemente creamos los archivos con un template que nos permita visualizar el cambio de una página a otra.
Modificamos el router para incluir las rutas a las nuevas páginas:
constroutes=[{path:'/',name:'Home',redirect:'/todos'},{path:'/todos',name:'todos',component:()=>import(/* webpackChunkName: "todos" */'../views/Todos.vue')},{path:'/todos/create',name:'todos-create',component:()=>import(/* webpackChunkName: "todos-create" */'../views/TodoCreate.vue')},{path:'/todos/:id/update',name:'todos-update',component:()=>import(/* webpackChunkName: "todos-update" */'../views/TodoUpdate.vue')}]
La ruta de update recibe un parámetro id.
Modificamos elApp.vue para cargar las nuevas rutas, utilizando bootstrap-vue.
<template><b-container><b-navtabs><b-nav-itemexactto="todos">Listado de tareas</b-nav-item><b-nav-itemexactto="todos/create">Formulario de alta de tareas</b-nav-item></b-nav></b-container></template>
About
Resources
Uh oh!
There was an error while loading.Please reload this page.