Persistencia del modelo

Clase 18 de 21 • Curso Práctico de Vue.js

Diego Valdez Acosta

student•

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),
      })
    );
  }
});

Alexander Silvera

student•

Seria bueno que den un ejemplo de como consumir los datos de una api o como conectar con una base de datos externas.

Carlos Rodríguez

student•

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

Josue Cerron Tuesta

student•

Hay cursos en platzi que puedes tomar

Eduardo Torres

student•

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) }));
  },

Xiomar Serna

student•

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)
);

lucas cartisano

student•

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

Diana Martinez

student•

También es posible, aquí el punto es dar un ejemplo, pero por supuesto que se puede mejorar. :3

Martin Mendez

student•

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}`;
    },"");
});

Persistencia del modelo

Introducción

Construye una aplicación para el control de tus gastos con Vue.js

Creación del proyecto

Setup inicial

Splashscreen

Header y contenido

Layout

Vista

Resumen de datos

Agregando formato a la moneda

Componente del historial

Lista del historial

El botón para agregar

Formulario para agregar

Gráfico

Creación del SVG del gráfico

Creación de las coordenadas en el gráfico

Creación de la lógica del gráfico

Creando la interacción con el gráfico

Modelo

Modelo de datos

Agregar y quitar

Persistencia del modelo

Últimos detalles de nuestra aplicación

Cierre

Poniendo nuestra aplicación en producción en Netlify

¿Quieres más cursos de Vue?