如何在填写表单时避免Vuex存储的用户数据被响应式更新

你在getUserProfile接口请求成功后，直接将接口返回的res.data同时赋值给了本地表单变量this.profile和Vuex存储，二者属于同一引用对象。因此表单通过v-model修改属性时，Vuex中存储的用户资料会因为引用关联同步被修改，无需触发Mutation就出现了数据变更的问题。

核心逻辑是给本地表单变量做深拷贝，切断和Vuex存储数据的引用关联，只有表单提交成功后才主动同步新数据到Vuex。 #

1. 修改接口请求赋值逻辑 #

普通数据场景直接用JSON序列化实现深拷贝即可，无需额外依赖：

getUserProfile() {
  UserService.getUserProfile()
    .then(res => {
      if (res.status === 200) {
        // 深拷贝数据给本地表单使用，和源数据断开引用
        this.profile = JSON.parse(JSON.stringify(res.data))
        // 原始数据传给Vuex存储
        UserModule.HANDLE_USER_PROFILE(res.data)
      }
    })
    .catch(error => {
      console.log(error)
    })
}

如果用户资料包含文件、undefined、Symbol等JSON不支持的类型，可以用lodash的cloneDeep方法：

// 先引入
import cloneDeep from 'lodash/cloneDeep'

// 赋值时替换为
this.profile = cloneDeep(res.data)

2. 提交成功后同步最新数据到Vuex #

原有代码提交成功后仅更新了用户名，需要补充同步完整的用户资料到Vuex：

UserService.updateUserProfile(new_profile)
  .then(res => {
    if (res.status === 200) {
      let user_name = `${this.profile.first_name} ${this.profile.last_name}`
      UserModule.UPDATE_USER_NAME(user_name)
      // 提交成功后将最新的表单数据同步到Vuex
      UserModule.HANDLE_USER_PROFILE(JSON.parse(JSON.stringify(this.profile)))
      this.$bvModal.show('modal-success')
    }
  })

修改完成后，用户未提交的表单修改只会影响本地变量，不会改动Vuex的存储数据，下次进入页面重新拉取Vuex或者接口的原始数据即可恢复正确的初始值，不会出现用户误以为数据已提交的误导问题。

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