Pinia与vue-chartjs结合实现响应式图表问题求助

你的问题核心是图表的data对象没有响应式追踪Pinia Store的变化——当前代码里的data和labels仅在组件初始化时生成一次，后续Store数据更新时不会自动重新计算，导致图表无法感知变化。

修复步骤： #

• 将data定义为Vue的计算属性（computed），让它自动监听Pinia Store中arr的变化，每次变化时重新生成完整的图表数据结构
• 动态生成labels，确保其长度始终与Store中的arr保持一致

修改后的代码： #

<script setup>
import { storeToRefs } from 'pinia'
import { useStore} from '@/store/pinia-store-file';
import { computed } from 'vue' // 引入computed
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 { arr } = storeToRefs(store); // 解构出响应式的arr

// 用computed动态生成图表数据
const data = computed(() => ({
  labels: [...Array(arr.value.length).keys()], // 每次arr变化时重新生成labels
  datasets: [
    {
      label: 'Data One',
      backgroundColor: '#f87979',
      data: arr.value // 直接使用响应式的arr值
    }
  ]
}))

const options = {
  responsive: true,
  maintainAspectRatio: false
}
</script>

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

为什么这样能生效？ #

• computed会自动追踪其依赖（这里是arr.value），当Pinia中的arr被修改时，计算属性会重新执行，生成新的data对象
• vue-chartjs的Line组件会监听data prop的变化，当新的data传入时，会自动更新图表

内容的提问来源于stack exchange，提问作者Yolo_chicken