Chart.js in a Vue page throws error: do not mutate vuex store state outside mutation handlers

Question

我有一个 Nuxt/Vue 应用程序，其页面显示图表。此页面还包含

允许用户创建新数据点的模态组件
一个下拉菜单，允许用户select他们希望图表显示多少天的数据。

我想实现以下目标：

创建新数据条目后刷新页面（再次调用我的API）
当用户选择不同的下拉值时刷新页面

我现在面临的主要问题是条形图在我关闭数据输入模式几秒钟后消失，我可以在控制台中看到以下错误：Error: [vuex] do not mutate vuex store state outside mutation handlers..

此外，我似乎无法通过更改下拉值来触发更新，但这是我的第二个问题。

由于此示例涉及外部 API，因此很难想出一个可重现的示例，但这是我的设置：

<template>
...
<select v-model="chartSelection", :oninput="refreshChart">
   <option value="0">7 days</option>
   <option value="1">14 days</option>
</select>
<bar-chart :data="chartData" :options="chartOptions"/>
<Modal v-if="showModal">
<!-- 
This is a custom component with its own modalToggle function.
It opens a form that allows you to create a new data point.
When this modal is closed, I would like to refresh the page
over which this modal appears
-->
...
</template>
...
<script>
async function getData(axios, store, period){
   const data = await axios.get(`my/endpoint/${period}`)
   const chartData = {
      labels: data.data.dates,
      datasets: [
        {backgroundColor: 'red', label: 'A', data.data.a},
        {backgroundColor: 'blue', label: 'B', data.data.b},
      ]
   }
   store.commit('saveChartData', chartData) // a simple assignment mutation in vuex
}
...
export default {
   async asyncData({$axios, store}) {
      await getData($axios, store, '7')
   },
   methods: {
      refreshChart() {
         return getData(this.$axios, this.$store, this.days)
      }
   },
   data() {
      return {
         chartSelection: '0', // this should determined how much data we fetch
      }
   }
},
computed: {
   ...mapState(['chartData', 'showModal']),
   days() {
      return this.chartSelection == '0' ? '7' : '14'
   }
}
...
</script>

如果有人对如何解决此问题有任何建议，请告诉我！

编辑：

仅供参考，模态除了提供一个将图表数据提交给 API 的表单外什么都不做。上例中的 bar-chart 是一个 chart.js 插件，如下所示：

import Vue from 'vue'
import Bar from 'vue-chartjs'
const registerComponent = function (name, originalComponent) {
  Vue.component(name, {
    extends: originalComponent,
    props: ['data', 'options'],
    mounted() {
      this.renderChart(this.data, this.options)
    },
  })
}

Answer 1

关于图表更新：

在模态中添加数据点时，向父组件发出自定义事件，这将调用 getData。

<Modal v-if="showModal" @dataPointAdded="getData">

模态内：

AddDataPoint(data) {
   /* Add data point */
   this.$emit("dataPointAdded");
}

要使用新数据更新图表组件 - 添加观察者：

props: ['data', 'options'],
mounted() {
  this.renderChart(this.data, this.options)
},
watch: 
{
    data() {
        this.$data._chart.update();
    },
    options() {
        this.$data._chart_update();
    }
}

在此处查看文档：https://vue-chartjs.org/guide/#troubleshooting

Own Watcher

Chart.js in a Vue page throws error: do not mutate vuex store state outside mutation handlers

Chart.js in a Vue page throws error: do not mutate vuex store state outside mutation handlers

javascript

vue.js

chart.js

vuex

nuxt.js