从Vue 3观测者中销毁和重绘Chart.js图

Question

我有一个图表显示在画布上，我想破坏和重新绘制一个Vue 3观察者。观察者工作，在更改上激发的函数工作到重绘步骤。当它到达重绘步骤时，我得到：

TypeError: Argument 1 ('element') to Window.getComputedStyle must be an instance of Element

图表对象作为component加载，并在最初挂载时从method呈现。我用的是香草chart.js (不是vue-chartjs)。

山：

  mounted() {
    this.renderChart()
  },

观看：

  watch: {
    '$store.state.weather': {
      handler(newValue, oldValue) {
        this.forecastChart.destroy()
        this.animation = 0
        this.renderChart()  // works fine until this line
      },
      deep: true
    }
  }

方法：

  methods: {
    renderChart() {
      let ctx = document.getElementById(this.id).getContext('2d');
      this.forecastChart = new Chart(ctx, {
        // source: https://stackoverflow.com/a/69047139/2827397
        type: 'doughnut',
        plugins: [{
          beforeDraw: (chart) => {
            const {ctx} = chart;

// etc.

类似的问题似乎有过时的解决办法，对我没有用。

理想情况下，我想使图表对Vuex存储状态值的变化做出反应，但是销毁和重新绘制图表将是一个可接受的结果，这就是我的问题所在。

chart.js 3.9.1，vue 3.0.0，vuex 4.0.2

编辑1：

试图.update()而不是.destroy()的图表对象也没有产生结果。

    updateChart() {
      this.forecastChart.data.datasets[0].needleValue = this.weather.airQuality - 0.5
      this.forecastChart.update()
    },

在以下方面的成果：

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'item.fullSize = options.fullSize')

Answer 1

我不够聪明，无法解释原因，但下面的修订解决了我面临的问题。上面，我使用以下destroy()命令引用图表对象：

this.forecastChart.destroy()

虽然这个命令没有导致控制台中显示任何错误，但在这个上下文中它显然没有正常工作(同样--这里非常重要的一点是，这是在Vue 3中完成的)。

我把上面的一行改为：

let chartStatus = Chart.getChart(this.forecastChart)
chartStatus.destroy()

现在，原来的图表被正确地摧毁了，新的图表被绘制在原来的位置。以下是相关代码的全部内容：

  watch: {
    '$store.state.weather.airQuality': {
      handler() {
        this.updateChart()
      },
      deep: true
    }
  },
  methods: {
    updateChart() {
      let chartStatus = Chart.getChart(this.forecastChart)  // key change
      chartStatus.destroy()                                 // key change
      this.animation = 0
      this.renderChart()
    },
    renderChart() {
      let ctx = document.getElementById(this.id).getContext('2d');
      this.forecastChart = new Chart(ctx, {
        type: 'doughnut',
        plugins: [{
          beforeDraw: (chart) => {
            const {ctx} = chart;

// etc.