Data reaktif disimpan menggunakan vue-chartjs dan Pinia

Question

Saya tidak pandai menggunakan Pinia untuk menyimpan data dengan vue-chartjs untuk mencipta carta reaktif. Saya menggunakan contoh ini sebagai panduan tetapi bergelut untuk membuat carta bertindak balas terhadap perubahan dalam kedai.

Saya menukar data kedai Pinia dalam komponen lain menggunakan borang reaktif dan dapat melihat data kedai berubah tetapi carta tidak dikemas kini.

Saya sedang memaparkan carta menggunakan komponen berikut:

<setup script>
import { storeToRefs } daripada 'pinia'
import { useStore} daripada '@/store/pinia-store-file';
import {
    Carta sebagai ChartJS,
    Skala Kategori,
    Skala Linear,
    PointElement,
    LineElement,
    Tajuk,
    petua alat,
    Lagenda
} daripada 'chart.js';
import { Line } daripada 'vue-chartjs';

ChartJS.register(
    Skala Kategori,
    Skala Linear,
    PointElement,
    LineElement,
    Tajuk,
    petua alat,
    Lagenda
);

const store = useStore();

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

data const = {
  label: label,
  set data: [
    {
      label: 'Data Satu',
      Warna latar belakang: '#f87979',
      data: storeData.arr.value
    }
  ]
}

pilihan const = {
  responsif: benar,
  maintainAspectNisbah: palsu
}



</skrip>

<template>

  <Baris :data="data" :options="pilihan"

</template>

Saya cuba membungkus pembolehubah kedai dalam ref() tetapi saya rasa saya perlu memaparkan semula carta? Saya sedang berusaha untuk menggunakan contoh di atas pada keadaan kedai Pinia dan mengemas kininya apabila kedai berubah.

Answer 1

Anda tidak menetapkan data kepada respons. Sila gunakan untuk mengira

Kod ini boleh menyelesaikan masalah:

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