No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Persistencia del modelo

18/21
Recursos

Aportes 5

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

Si est谩n usando la sintaxis de <script setup> deben usar la funci贸n onMounted importandola desde 鈥榲ue鈥. 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.

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

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

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