如何通过多个突变来更新Vuex商店？

Question

如果我只改变一次状态（通过提交下面显示的两个突变中的任何一个），则没有错误并且图表正确更新。如果我运行两个突变：

commit('SET_COURSE_MATERIAL', data)
commit('SET_TOOLS_EQUIPMENT', data)

然后我得到Maximum call stack exceeded: RangeError。

如果我注释掉chart.vue的watch属性中的代码，则没有错误，我可以在console.log中看到具有正确值的状态

我只在运行“npm run dev”时收到有关最大调用堆栈的错误。当我将其部署到Google Cloud时，该网站按预期工作，我没有收到任何错误。我甚至通过编辑一些代码并重新部署它两次来重新检查这一点，同时也注意到构建日志中的时间。

summary.vue

        <v-card-text>
          <chart
            :chart-config.sync="this.$store.state.summary.courseMaterial"
          />
        </v-card-text>
...
        <v-card-text>
          <chart
            :chart-config.sync="this.$store.state.summary.toolsEquipment"
          />
        </v-card-text>

chart.vue

<template>
  <v-flex>
    <no-ssr><vue-c3 :handler="handler"/></no-ssr>
  </v-flex>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'chart',
  props: ['chartConfig'],
  data() {
    return {
      handler: new Vue()
    }
  },
  watch: {
    chartConfig: function(val) {
      console.log('chart component > watch > chartConfig', val)
      this.drawChart()
    }
  },
  created() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      this.handler.$emit('init', this.chartConfig)
    }
  }
}
</script>

store/summary.js

    import axios from 'axios'
import _ from 'underscore'
import Vue from 'vue'
import {
  courseMaterialChartConfig,
  toolsEquipmentChartConfig,
} from './helpers/summary.js'

axios.defaults.baseURL = process.env.BASE_URL

Object.filter = (obj, predicate) =>
  Object.assign(
    ...Object.keys(obj)
      .filter(key => predicate(obj[key]))
      .map(key => ({ [key]: obj[key] }))
  )

export const state = () => ({

  courseMaterial: '',
  toolsEquipment: '',

})

export const getters = {
  courseMaterial(state) {
    return state.courseMaterial
  },
  toolsEquipment(state) {
    return state.toolsEquipment
  }
}

export const actions = {
    async fetchData({ state, commit, rootState, dispatch }, payload) {
    axios.defaults.baseURL = process.env.BASE_URL
    let { data: initialData } = await axios.post(
      'summary/fetchInitialData',
      payload
    )
    console.log('initialData', initialData)
    let [counterData, pieChartData, vtvcData, guestFieldData] = initialData

    //dispatch('setCourseMaterial', pieChartData.coureMaterialStatus)
    //dispatch('setToolsEquipment', pieChartData.toolsEquipmentStatus)
  },
  setCourseMaterial({ commit }, data) {
    commit('SET_COURSE_MATERIAL', courseMaterialChartConfig(data))
  },
  setToolsEquipment({ commit }, data) {
    commit('SET_TOOLS_EQUIPMENT', toolsEquipmentChartConfig(data))
  }
}

export const mutations = {
  // mutations to set user in state
  SET_COURSE_MATERIAL(state, courseMaterial) {
    console.log('[STORE MUTATIONS] - SET_COURSEMATERIAL:', courseMaterial)
    state.courseMaterial = courseMaterial
  },
  SET_TOOLS_EQUIPMENT(state, toolsEquipment) {
    console.log('[STORE MUTATIONS] - SET_TOOLSEQUIPMENT:', toolsEquipment)
    state.toolsEquipment = toolsEquipment
  },
}

helpers/summary.js

export const courseMaterialChartConfig = data => {
  return {
    data: {
      type: 'pie',
      json: data,
      names: {
        received: 'Received',
        notReceived: 'Not Received',
        notReported: 'Not Reported'
      }
    },
    title: {
      text: 'Classes',
      position: 'right'
    },
    legend: {
      position: 'right'
    },
    size: {
      height: 200
    }
  }
}
export const toolsEquipmentChartConfig = data => {
  return {
    data: {
      type: 'pie',
      json: data,
      names: {
        received: 'Received',
        notReceived: 'Not Received',
        notReported: 'Not Reported'
      }
    },
    title: {
      text: 'Job Role Units',
      position: 'right'
    },
    legend: {
      position: 'right'
    },
    size: {
      height: 200
    }
  }
}