Persistencia del modelo
Clase 18 de 21 • Curso Práctico de Vue.js
Contenido del curso
Diego Valdez Acosta
student•
hace 3 años
Diego Valdez Acosta
Alexander Silvera
Carlos Rodríguez
Josue Cerron Tuesta
Eduardo Torres
Xiomar Serna
lucas cartisano
Diana Martinez
Martin Mendez
Si están usando la sintaxis de <script setup> deben usar la función onMounted importandola desde 'vue'. Quedaría algo así:
import { computed, onMounted, ref } from "vue"; ... ... ... onMounted(() => { const movementsFromLocalStorage = localStorage.getItem("movements"); if (movementsFromLocalStorage) { movements.value = JSON.parse(movementsFromLocalStorage)?.map( (movement: any) => ({ ...movement, time: new Date(movement.time), }) ); } });
Seria bueno que den un ejemplo de como consumir los datos de una api o como conectar con una base de datos externas.
Debes hacer primero la trilogía de cursos del profesor JuanDC, sobre el consumo de API's, aquí los enlaces: . Curso de Consumo de API REST con JavaScript Curso Práctico de Consumo de API REST con JavaScript Curso Profesional de Consumo de API REST con JavaScript
Hay cursos en platzi que puedes tomar
Me gusta usar el doble || (pipe) para asignar un valor por default en caso de que no se obtenga nada del localstorage.
mounted() { const movements = JSON.parse(localStorage.getItem("movements")) || []; this.movements = movements.map((m) => ({ ...m, time: new Date(m.time) })); },
Si quieren solucionar el monto negativo que no se dibujaba correctamente en el gráfico al final del video, solo deben corregir la función amounts() del Home.vue:
amounts() { const lastDays = this.movements.filter((x) => { const today = new Date(); const oldDate = today.setDate(today.getDate() - 30); return x.time > oldDate; }) .map((y) => y.amount); return lastDays.map((x, i) => { const lastMovements = lastDays.slice(0, i); return ( x + lastMovements.reduce((suma, movement) => { return suma + movement; }, 0) ); }); },
Esta sección calcula la suma de los movimientos anteriores:
lastMovements.reduce((suma, movement) => { return suma + movement; }, 0)
Pero estaba faltando sumar el movimiento actual (x):
return ( x + lastMovements.reduce((suma, movement) => { return suma + movement; }, 0) );
La parte que borra los datos del formulario (minuto 8:00, aprox), no sería mejor implementarla dentro de la funcion que guarda los datos? y luego de comprobar que los datos se guarden? porque en caso de que el evento o la funcion tengan algun error y fallen, nos va a parecer que se guardo cuando no se hizo, y se van a perder los datos
También es posible, aquí el punto es dar un ejemplo, pero por supuesto que se puede mejorar. :3
el problema de la grafica se debe al largo del array de amounts que toma al principio. Debería ser ===> amounts.value.length - 1 Luego en const x modifical la multiplicada quitarle el "* i + 1"
Les dejo el codigo abajo.
OJO que yo tengo 330 de largo en Pixeles en la clase creo fue siempre de 300 ! ! ! !
const points = computed(() => { const total = amounts.value.length - 1; return amounts.value.reduce((points, amount, i) => { // 330 is the total pixel width const x = (330 / total) * i; console.log(total, i); const y = amountToPixels(amount); console.log("x , y ==> ", x, y); return `${points} ${x},${y}`; },""); });