vue-chart.js / vuex：当 vuex 状态改变时图表不更新答案

【问题标题】：vue-chart.js / vuex: Chart not updating when vuex state changesvue-chart.js / vuex：当 vuex 状态改变时图表不更新
【发布时间】：2020-08-04 07:34:43
【问题描述】：

我使用 vue-chart.js、Chart.js 并使用我的 vuex 状态中的一些值创建了一个圆环图。除了更新 vuex 状态时，图表也不会更新。

我已尝试使用计算属性来尝试使图表保持最新。但后来我收到以下错误：

Error in callback for watcher "chartData": "TypeError: Cannot set property 'data' of undefined"

TypeError: Cannot set property 'data' of undefined

DoughnutChart.vue：

<script>
    import { Doughnut, mixins } from 'vue-chartjs';
    const { reactiveProp } = mixins;

    export default {
        extends: Doughnut,
        mixins: [reactiveProp],
        props: ['chartData', 'options'],
        mounted () {
            this.renderChart(this.chartdata, this.options)
        }
    }
</script>

AppCharts.vue：

<template>
    <div id="chart_section">
        <h2 class="section_heading">Charts</h2>

        <div id="charts">
            <DoughnutChart :chart-data="datacollection" :options="chartOptions" class="chart"></DoughnutChart>

        </div>
    </div>
</template>


<script>
import DoughnutChart from './DoughnutChart';
import { mapGetters } from 'vuex';

export default {
    components: {
        DoughnutChart
    },
    computed: {
        ...mapGetters(['boardColumnData']),
        datacollection() {
            return {
                datasets: [{
                    data: [this.boardColumnData[0].total.$numberDecimal, this.boardColumnData[1].total.$numberDecimal, this.boardColumnData[2].total.$numberDecimal, this.boardColumnData[3].total.$numberDecimal],
                    backgroundColor: [
                        '#83dd1a', 
                        '#d5d814',
                        '#fdab2f',
                        '#1ad4dd'
                    ],
                    borderColor: [
                        '#83dd1a', 
                        '#d5d814',
                        '#fdab2f',
                        '#1ad4dd'
                    ],
                }]
            }
        },
    },
    data() {
        return {
            chartOptions: null
        }
    },
    mounted () {
        this.fillData();
    },
    methods: {
        fillData() {
            this.chartOptions = {
                responsive: true,
                maintainAspectRatio: false
            }
        }
    }
}
</script>

这是boardColumnData得到状态后的样子：

[
    {
        "name":"Opportunities",
        "percentage":{
            "$numberDecimal":"0"
        },
        "total":{
            "$numberDecimal":70269
        }
    },
    {
        "name":"Prospects",
        "percentage":{
            "$numberDecimal":"0.25"
        },
        "total":{
            "$numberDecimal":0
        }
    },
    {
        "name":"Proposals",
        "percentage":{
            "$numberDecimal":"0.5"
        },
        "total":{
            "$numberDecimal":5376
        }
    },
    {
        "name":"Presentations",
        "percentage":{
            "$numberDecimal":"0.75"
        },
        "total":{
            "$numberDecimal":21480
        }
    },
]

$numberDecimal 值是在另一个组件上发生事件时在 vuex 内部更新的值。当这些值发生变化时，我希望图表使用新值进行更新。

【问题讨论】：

标签： javascript vue.js chart.js vuex vue-chartjs

【解决方案1】：

您必须在道具中传递数据。 IE。最快的解决方案是让fillData() 以正确的格式返回datacollection。

例如

fillData(){
    return {
      datasets: [
        {
          data: [
            this.boardColumnData[0].total.$numberDecimal,
            this.boardColumnData[1].total.$numberDecimal,
            this.boardColumnData[2].total.$numberDecimal,
            this.boardColumnData[3].total.$numberDecimal,
          ],
          backgroundColor: ["#83dd1a", "#d5d814", "#fdab2f", "#1ad4dd"],
          borderColor: ["#83dd1a", "#d5d814", "#fdab2f", "#1ad4dd"],
        },
      ];
    }
}

您需要对选项执行相同的操作，但将它们传递到新的 options=yourOptions() 属性中。

这让我发疯了。我希望这仍然可以帮助您（或其他人）。

【讨论】：