Nuxt2编辑prop传入的多选题选项时Vuex修改状态报错如何解决？

报错原因 #

• 字符串属于基本数据类型，你初始化questionTitle: this.question.title时是值拷贝，后续修改本地的questionTitle只会改动当前组件内的变量，不会影响Vuex store中存储的原question对象，因此不会触发告警。
• question.options是引用类型，你用Object.assign或扩展运算符做的是浅拷贝：仅复制了外层的options对象，内层每个option子对象仍然指向Vuex store中的原引用。你修改option.content时本质是直接修改了store里的状态，就触发了「mutation外修改store」的告警。

最优实现方案 #

核心思路是对options做深拷贝，拿到完全独立于store的本地副本，修改完提交时再同步到store即可。

具体实现步骤 #

1. 初始化时深拷贝question.options，如果你的options结构里没有函数、循环引用、Symbol这类特殊值，最简单的深拷贝方式如下：

data() {
  return {
    questionTitle: this.question.title,
    // 深拷贝options，完全切断和store原对象的引用关联
    questionOptions: JSON.parse(JSON.stringify(this.question.options))
  }
}

如果你的项目引入了lodash，也可以直接用_.cloneDeep(this.question.options)实现深拷贝。

2. 模板部分的v-model绑定逻辑不需要修改，所有修改只会作用于组件本地的副本，不会再触发Vuex告警。

3. 提交更新时，把最新的标题和选项整合后，先调用更新接口，接口请求成功后再通过Vuex mutation同步更新store里的对应数据即可，示例逻辑：

methods: {
  async updateQuestion() {
    const updatedQuestion = {
      ...this.question,
      title: this.questionTitle,
      options: this.questionOptions
    }
    // 调用更新接口
    await api.updateQuestion(updatedQuestion)
    // 提交mutation更新store
    this.$store.commit('updateQuestion', updatedQuestion)
  }
}

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