Mit vue-chartjs und Pinia gespeicherte reaktive Daten

Question

Ich bin nicht gut darin, Pinia zum Speichern von Daten mit vue-chartjs zu verwenden, um reaktive Diagramme zu erstellen. Ich verwende dieses Beispiel als Leitfaden, habe aber Schwierigkeiten, das Diagramm auf Änderungen im Geschäft reagieren zu lassen.

Ich habe die Pinia-Geschäftsdaten in einer anderen Komponente mithilfe reaktiver Formulare geändert und konnte sehen, dass sich die Geschäftsdaten änderten, aber das Diagramm wurde nicht aktualisiert.

Ich rendere das Diagramm mit der folgenden Komponente:

<script setup>
{storeToRefs} aus 'pinia' importieren
import { useStore} aus '@/store/pinia-store-file';
importieren {
    Diagramm als ChartJS,
    KategorieSkala,
    Lineare Skalierung,
    PointElement,
    Linienelement,
    Titel,
    Tooltip,
    Legende
} von 'chart.js';
import { Line } from 'vue-chartjs';

ChartJS.register(
    KategorieSkala,
    Lineare Skalierung,
    PointElement,
    Linienelement,
    Titel,
    Tooltip,
    Legende
);

const store = useStore();

const storeData= storeToRefs(store);
const labels = [...Array(storeData.arr.value.length).keys()];

const data = {
  Etiketten: Etiketten,
  Datensätze: [
    {
      Etikett: „Data One“,
      Hintergrundfarbe: '#f87979',
      Daten: storeData.arr.value
    }
  ]
}

const-Optionen = {
  reaktionsfähig: wahr,
  keepAspectRatio: false
}



</script>

<Vorlage>

  <Zeile :data="data" :options="options"

</template>

Ich habe versucht, die Speichervariable in ref() einzuschließen, aber ich denke, ich muss das Diagramm neu rendern? Ich arbeite daran, das obige Beispiel auf den Pinia-Store-Status anzuwenden und es zu aktualisieren, wenn sich der Store ändert.

Answer 1

您没有将数据设置为响应。请使用计算

这段代码可以解决问题：

<script setup>
import { storeToRefs } from 'pinia'
import { useStore} from '@/store/pinia-store-file';
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
} from 'chart.js';
import { Line } from 'vue-chartjs';
import { computed } from "vue"

ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
);  

const store = useStore();

const storeData= storeToRefs(store);

const data = computed(() => ({
  labels: [...Array(storeData.arr.value.length).keys()],
  datasets: [
    {
      label: 'Data One',
      backgroundColor: '#f87979',
      data: storeData.arr.value
    }
  ]
}))

const options = {
  responsive: true,
  maintainAspectRatio: false
}



</script>

<template>

  <Line :data="data" :options="options" />

</template>