如何传递多个突变来更新 Vuex 存储？

Question

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

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

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

如果我在chart.vue的手表属性中注释掉代码，没有错误，我可以在console.log

中看到具有正确值的状态

仅当我运行 "npm run dev" 时，我才收到有关最大调用堆栈的错误。当我将它部署到 Google 云时，该站点按预期工作并且我没有收到任何错误。我什至通过编辑一些代码并重新部署它两次来重新检查它，同时还注意到构建日志中的时间。

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
    }
  }
}

Answer 1

深度复制图表配置。

methods: {
    drawChart() {
      this.handler.$emit('init', {...this.chartConfig})
    }
  }

如何传递多个突变来更新 Vuex 存储？

How to pass multiple mutations to update Vuex store?

vue.js

state

vuex

c3.js