各位前端大佬，请教一个莫名其妙的前端 JS 问题。

資深大佬 : wzl20001001 6

撸代码时出现了一个奇怪的 Bug 。

主要逻辑是用 axios 获取后端接口返回的状态码，如果成功则将表单值置为空，以便下次添加。

但是当在控制台输出的时候，输出的对象是先经过主函数的 then 中的语句更改过的对象，但是如果读取其中的属性值，却是未经过更改的值。

测试的执行顺序也是输出的 1，2，3 的顺序(先是执行 dispatch 之前的语句，接着执行 action，最后执行 then 中的语句)。

有一点实在想不通：为啥还没运行到赋值语句，直接输出对象会是赋值后的样子。而且只有输出对象时，控制台显示对象的属性值是更改，但直接对象中的属性值时却未改变。

这是主函数：

addBookmark() {    console.log(1)  // 1, 测试，用于测试执行顺序   console.log(this.newBookmarkInfo) // 获取到的对象是经过过 then 中修改之后的对象 {bookmarkId:0, bookmarkTitle:1, bookmarkUrl:1}   console.log(this.newBookmarkInfo.bookmarkTitle) // 获取到的是未经更改的 title: "title"    this.$store.dispatch('addBookmark',this.newBookmarkInfo).then(() => { // 调用 Action      console.log(this.newBookmarkInfo) // 同样是值更改过的对象     console.log(this.newBookmarkInfo.bookmarkTitle) // 获取到的是未经更改的对象中的 title: "title"      // 赋值语句     this.newBookmarkInfo.bookmarkTitle='1'     this.newBookmarkInfo.bookmarkUrl='1'      console.log(3)  // 3      // 对表单状态和弹窗状态的重置     this.$refs.obs.reset()     this.dialog = false   }).catch(error => {     console.log('error')     console.log(error.response)   }) },

这是 vuex 中的 Action：

addBookmark(undefine, newBookmarkInfo){   console.log(2)  // 2    console.log(newBookmarkInfo)  // 同样也是被更改过的对象   console.log(newBookmarkInfo.bookmarkTitile) // 获取到的是未经过更改的 title   return new Promise((resolve,reject) => {     addBookmarkOne(newBookmarkInfo).then(resp => {       const { data } = resp       resolve(data)     }).catch(error => {       reject(error)     })   }) },

这是运行的控制台截图：

各位前端大佬，请教一个莫名其妙的前端 JS 问题。

大佬有話說 (8)