vue.js - 如何正确地将带有数据的数组从 vue3 中的 VueApexCharts 库传递给图表？

Question

我正在编写一个小型 covid 项目并尝试使用 ApexCharts 绘制已确认的感染数据，但图表未显示。我在两个表中输入来自 vuex 的数据。数据是有效的，但是它来自代理对象中的 api 和 sa。我究竟做错了什么？（我使用 ApexCharts 是因为 vue Chartjs 与 vue 3 不兼容）。

<template>
  <apexchart width="500" type="bar" :options="options" :series="series"></apexchart>
</template>

<script>
import VueApexCharts from "vue3-apexcharts";

export default {
  components: {
    apexchart: VueApexCharts,
  },
 data(){  
   return {
     series: [],
      options: {
        chart: {
          type: "bar",
          height: 400,
          stacked: true
        },
        plotOptions: {
          bar: {
            horizontal: false
          }
        },
        dataLabels: {
          enabled: false
        },
        tooltip: {
          shared: true,
          followCursor: true
        },
        stroke: {
          width: 1,
          colors: ["#fff"]
        },
        fill: {
          opacity: 1
        },
        legend: {
          position: "top",
          horizontalAlign: "center",
          offsetX: 40
        },
        colors: ["rgb(95, 193, 215)", "rgb(226, 37, 43)", "rgb(94, 181, 89)"]
      }
    };
 },
 computed: {
   getDate(){
     return this.$store.getters['chart/getDate'];
   },
   getConfirmed(){
    return this.$store.getters['chart/getConfirmed'];
   }
 },
   methods: {
    fillDate(){
       this.options = {
         xaxis: {
           categories: this.getDate
         }
       }
        this.series = [
         {
           name: 'Confirmed',
           data: this.getConfirmed
         }
       ];
     }
   },
  async mounted() {
    await this.fillDate();
  }
}

来自 vuex 存储的数据是两个数组。

Proxy
[[Handler]]: Object
[[Target]]: Array(45)
[[IsRevoked]]: false

Answer 1

不要使用挂载的钩子和方法，而是尝试观察计算的属性，然后根据这些属性更新数据：

 computed: {
   getDate(){
     return this.$store.getters['chart/getDate'];
   },
   getConfirmed(){
    return this.$store.getters['chart/getConfirmed'];
   }
 },
watch:{
   getDate:{
  handler(newVal){
    this.options = {
         xaxis: {
           categories: this.getDate
         }
       },
   deep:true
    },
 getConfirmed:{
   handler(newVal){
    this.series = [
         {
           name: 'Confirmed',
           data: this.getConfirmed
         }
       ];
 },
  deep:true
 }
}