Vuex提交多个mutation触发栈溢出RangeError问题求助

看起来你碰到的是开发环境下Vue响应式系统与Vuex单向数据流冲突导致的循环更新栈溢出问题，生产环境因为调试追踪被优化所以没出现，咱们一步步拆解解决：

核心原因 #

1. 不必要的.sync修饰符：你在summary.vue里给chart-config加了.sync，但这个组件根本不需要修改配置并同步回store。.sync的本质是自动绑定@update:chart-config事件，当Vue的响应式系统在开发环境下检测到prop有"潜在变化"时，会尝试直接修改绑定的store state——这违反了Vuex单向数据流的规则，直接触发了循环更新：store状态变更→组件watch触发→.sync试图修改state→再次触发watch→无限循环直到栈溢出。
2. 双mutation同时触发的叠加效应：同时提交两个mutation时，两个chart组件的watch回调几乎同时执行，进一步放大了循环更新的问题，直接触发了栈溢出错误。

具体解决方案 #

1. 移除多余的.sync修饰符 #

既然chart组件只是接收配置来绘图，不需要反向修改store，直接去掉.sync就行：

<!-- summary.vue 修改后 -->
<v-card-text>
  <chart :chart-config="this.$store.state.summary.courseMaterial" />
</v-card-text>
...
<v-card-text>
  <chart :chart-config="this.$store.state.summary.toolsEquipment" />
</v-card-text>

2. 优化chart组件的watch逻辑 #

显式声明watch的监听规则，避免不必要的深度监听（虽然默认就是浅监听，但写出来更清晰）：

// chart.vue 中watch部分修改
watch: {
  chartConfig: {
    handler(val) {
      console.log('chart component > watch > chartConfig', val)
      this.drawChart()
    },
    deep: false // 只监听对象引用变化，符合我们的需求
  }
},

3. 保持Vuex状态更新的正确性 #

你的mutation代码已经是直接替换整个state对象（而不是修改内部属性），这能保证响应式系统正确检测到变化，继续保持这个写法就好：

// store/summary.js 中的mutation无需修改
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
},

额外小贴士 #

• 开发环境下一定要遵守Vuex的单向数据流规则：所有state变更必须通过mutation/action，绝对不要直接修改state，这能帮你避开绝大多数响应式相关的坑。
• 如果组件真的需要修改store状态，应该通过this.$store.commit()或this.$store.dispatch()来操作，而不是依赖prop的双向绑定。

内容的提问来源于stack exchange，提问作者Rounak Jain