Vue对象推入Vuex store后原对象修改同步到store的问题及优化方案

引用同步问题的核心原因有两点：

• 传递给action的newRecord是组件data中对象的引用，如果你在action中是直接修改该对象的属性（而非完全替换为后端返回的新对象），就会导致store中存入的还是原对象的引用，组件修改原对象自然会同步到store。你代码中newRecord = response.data只是修改了action函数内部的形参变量指向，没有对外部传入的原对象做任何处理，如果实际代码中存在直接修改原对象属性再提交的逻辑，就会出现引用共享问题。
• axios请求返回的response.data本身是全新的序列化对象，正常情况下提交这个对象到store不会和原表单对象共享引用，出现问题大概率是你的业务代码中存在复用前端表单对象存入store的逻辑。

以下是生产环境通用的规范实现，完全规避引用污染问题：

• 提交表单时传递拷贝后的对象，从根源切断引用关联
  浅拷贝足够应对单层对象，多层对象可以用structuredClone做结构化深拷贝

  methods: {
    async addRecord(){
      const submitRecord = {...this.newRecord}
      await this.addRecordAction(submitRecord)
      // 后续修改原newRecord完全不会影响提交的对象
      this.newRecord.name = 'new name'
    }
  }
  

• Vuex action统一使用后端返回的独立对象
  所有存入store的记录必须使用后端接口返回的完整数据，不要复用前端提交的对象，同时可以避免前端未同步后端生成字段（如id、创建时间等）的问题

  async addRecordAction({commit}, submitRecord){
    const response = await axios.post('/api/record', submitRecord)
    // 直接提交后端返回的全新对象，和前端提交的对象完全独立
    commit('addRecordMutation', response.data)
  }
  

• 表单提交完成后重置表单对象
  新增记录成功后直接重置整个表单对象，避免残留旧数据的同时进一步切断引用关联

  // 重置逻辑可以单独抽成初始化函数，避免重复编写默认值
  const initNewRecord = () => ({
    name: '',
    // 其他表单字段默认值
  })
  // data中声明表单对象
  data() {
    return {
      newRecord: initNewRecord()
    }
  },
  methods: {
    async addRecord(){
      const submitRecord = {...this.newRecord}
      await this.addRecordAction(submitRecord)
      // 直接赋值为新的空对象，彻底断开和旧对象的关联
      this.newRecord = initNewRecord()
    }
  }
  

• 可选强防护：Vuex mutation存入前做一次拷贝
  如果需要完全屏蔽外部对state数据的意外修改，可以在存入前再做一次拷贝

  addRecordMutation: (state, newRecord) => {
    state.records.push(structuredClone(newRecord))
  }
  

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