使用 vue-chartjs 和 Pinia 儲存的反應式數據
P粉946437474
2023-08-31 00:26:42
<p>我不擅長結合使用 Pinia 儲存資料和 vue-chartjs 來建立反應式圖表。我使用此範例作為指南,但努力讓圖表對商店中的變化做出反應。 </p>
<p>我使用反應式表單更改了另一個元件中的 Pinia 商店數據,並且可以看到商店數據發生變化,但圖表沒有更新。 </p>
<p>我正在使用以下組件渲染圖表:</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>我嘗試將 store 變數包裝在 <code>ref()</code> 中,但我認為我需要重新渲染圖表?我正在努力將上面的範例套用到 Pinia 商店狀態並在商店更改時進行更新。 </p>
您沒有將資料設定為回應。請使用計算
這段程式碼可以解決問題: