Vue项目修改本地数组触发Vuex状态修改报错问题求助

这个问题我之前也踩过坑，核心原因是你没有完全复制Vuex中的user对象，嵌套的数组依然引用着原状态，导致修改组件data里的数组时，其实直接改动了Vuex的store状态，触发了Vuex的严格模式校验。

问题分析 #

你用Object.assign({}, this.user)复制user对象，但这只是浅拷贝：

• 对于name、contact这类普通字段，确实复制了独立的值，修改不会影响Vuex状态；
• 但skills、projects、interests是数组（引用类型），浅拷贝只会复制它们的内存引用，所以this.data.skills和Vuex store里的state.user.profile.skills指向同一个数组。当你调用push或删除元素时，本质是在修改Vuex的状态，自然触发报错。

至于Quasar项目里没问题，大概率是Quasar框架内部对这类场景做了自动深拷贝处理，帮你规避了引用问题，而vue-cli项目没有这个默认处理，所以问题就暴露出来了。

解决方案 #

有两种常见处理方式，可根据你的需求选择：

1. 深拷贝Vuex对象，完全隔离本地数据

如果编辑组件不需要实时同步Vuex状态（比如编辑完成后统一提交），可以对user对象做深拷贝，让本地data完全独立：

mounted() {
  if (this.user) {
    // 用JSON序列化/反序列化实现深拷贝（适合无复杂类型的场景）
    this.data = JSON.parse(JSON.stringify(this.user));
    // 若项目引入了lodash，也可以用更可靠的深拷贝：this.data = _.cloneDeep(this.user)
    
    if (this.data.projects.length === 0) {
      this.data.projects = [this.baseItems.projects];
    }
    if (this.data.skills.length) {
      this.filterSkillList();
    }
  }
},

这样修改this.data.skills时，只会改动本地副本，不会影响Vuex状态，报错自然消失。

2. 通过Vuex mutation修改状态（适合实时同步场景）

如果需要修改数组时实时更新Vuex状态，所有对数组的操作都要通过Vuex的mutation完成，不能直接修改本地data里的数组：

首先在Vuex的user模块中添加对应的mutation：

// user模块的mutations
mutations: {
  ADD_SKILL(state, skill) {
    state.profile.skills.push(skill);
  },
  REMOVE_SKILL(state, index) {
    state.profile.skills.splice(index, 1);
  }
}

然后在组件里修改方法，通过commit调用mutation：

handleAddSkill(name) {
  // 提交mutation修改Vuex状态
  this.$store.commit('user/ADD_SKILL', { name });
  // 由于使用mapGetters获取user，Vuex状态更新后user会自动同步，可重新同步本地data
  this.data = JSON.parse(JSON.stringify(this.user));
  
  this.dataSkillFilteredList = this.dataSkillFilteredList.filter(item => item !== name);
  this.dataSkillList = this.dataSkillFilteredList;
}

总结 #

核心原则就是永远不要直接修改Vuex store里的状态：要么用深拷贝隔离本地数据，要么通过mutation来修改状态。这个问题在Vue严格模式下会被严格校验，是Vuex的核心规范之一。

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