<p>我不擅长结合使用 Pinia 存储数据和 vue-chartjs 来创建反应式图表。我使用此示例作为指南，但努力让图表对商店中的变化做出反应。</p> <p>我使用反应式表单更改了另一个组件中的 Pinia 商店数据，并且可以看到商店数据发生变化，但图表没有更新。</p> <p>我正在使用以下组件渲染图表：</p> <pre class="brush:php;toolbar:false;">&lt;script setup&gt; 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 } &lt;/script&gt; &lt;template&gt; &lt;Line :data=&quot;data&quot; :options=&quot;options&quot; /&gt; &lt;/template&gt;</pre> <p>我尝试将 store 变量包装在 <code>ref()</code> 中，但我认为我需要重新渲染图表？我正在努力将上面的示例应用到 Pinia 商店状态并在商店更改时进行更新。</p>

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