使用 vue-chartjs 和 Pinia 儲存的反應式數據

Question

我不擅長結合使用 Pinia 儲存資料和 vue-chartjs 來建立反應式圖表。我使用此範例作為指南，但努力讓圖表對商店中的變化做出反應。

我使用反應式表單更改了另一個元件中的 Pinia 商店數據，並且可以看到商店數據發生變化，但圖表沒有更新。

我正在使用以下組件渲染圖表：

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

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

const store = useStore();

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

const data = {
  labels: labels,
  datasets: [
    {
      label: 'Data One',
      backgroundColor: '#f87979',
      data: storeData.arr.value
    }
  ]
}

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



</script>

<template>

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

</template>

我嘗試將 store 變數包裝在 ref() 中，但我認為我需要重新渲染圖表？我正在努力將上面的範例套用到 Pinia 商店狀態並在商店更改時進行更新。

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>