Vue.js中调用getData函数后组件数据未实时更新问题

问题描述 #

在updateMemoChecklist函数中调用getData(this.selectedDate)后，已通过日志确认getData函数正常执行（能看到“Executed!!”输出），但后续console.log打印的this.shopInfo、this.info等组件数据并未更新，仅在页面刷新后数据才会生效，需要实现数据实时更新。

相关代码 #

getData 函数 #

getData (date) {
  console.log('Executed!!')
  Promise.resolve()
    .then(() => this.$store.commit('Loading/show'))
    .then(() => this.getShopList())
    .then(() => Promise.all([
      axios.get(`/shop/v2/${this.selectedShopId}`),
      axios.get(`/shop/${this.selectedShopId}/businessStatus`),
      axios.get(`/shop/${this.selectedShopId}/schedule`, { params: { targetDate: date.toISOString(true) } }),
      axios.get(`/shop/${this.selectedShopId}/floormap_image`),
      axios.get('/shop/room/keep')
    ]))
    .then(res => {
      this.shopInfo = res[0].data
      this.info = res[1].data
      this.schedule = res[2].data
      this.url_floormap_image = res[3].data
      this.keepList = res[4].data
      ) // 此处存在语法错误：多余的右括号
    })
    .catch(ex => { this.error(ex) })
    .finally(() => this.$store.commit('Loading/hide'))
},

updateMemoChecklist 函数 #

updateMemoChecklist (memoText) {
  return Promise.resolve()
    .then(() => this.$store.commit('Loading/show'))
    .then(() => {
      const promises = this.checkedItems.map(item => {
        const { shopId, roomId, keepRoomId, lastUpdateAt, startDate, endDate } = item
        const req = {
          startDate: startDate,
          endDate: endDate,
          memo: memoText,
          lastUpdateAt: lastUpdateAt
        }
        return axios.patch(`/shop/${shopId}/rooms/${roomId}/keep/${keepRoomId}`, req)
      })
      return Promise.all(promises)
    })
    .then(() => {
      this.$emit('input', false)
      this.$emit('change')
      return this.getData(this.selectedDate) // 此处调用getData
    })
    .then(() => {
      this.isOpenRegisterComplete = true
    })
    .then(() => {
      console.log('Updated Data', this.shopInfo, this.info, this.schedule, this.url_floormap_image, this.keepList)
      })
    }) // 此处存在语法错误：多余的右括号
    .catch((ex) => {
      this.error(ex)
    })
    .finally(() => this.$store.commit('Loading/hide'))
},

问题原因 #

1. getData未返回Promise链：getData内部发起了异步请求，但没有返回整个Promise链，导致updateMemoChecklist中调用return this.getData(...)时，返回的不是处于Pending状态的Promise，后续的.then会立即执行——此时getData的异步请求还未完成，组件数据尚未更新，所以打印的还是旧值。
2. 语法错误：getData的.then回调末尾多了一个右括号，updateMemoChecklist最后一个.then回调后也多了一个右括号，这些错误可能导致代码执行异常，干扰数据更新逻辑。

解决步骤 #

步骤1：修复语法错误 #

• 删除getData中.then(res => { ... })末尾多余的)；
• 删除updateMemoChecklist中最后一个.then回调后的多余)。

步骤2：让getData返回Promise链 #

修改getData函数，返回整个Promise链，确保updateMemoChecklist的后续.then会等待getData的异步操作完成：

getData (date) {
  console.log('Executed!!')
  // 新增return，返回整个Promise链
  return Promise.resolve()
    .then(() => this.$store.commit('Loading/show'))
    .then(() => this.getShopList())
    .then(() => Promise.all([
      axios.get(`/shop/v2/${this.selectedShopId}`),
      axios.get(`/shop/${this.selectedShopId}/businessStatus`),
      axios.get(`/shop/${this.selectedShopId}/schedule`, { params: { targetDate: date.toISOString(true) } }),
      axios.get(`/shop/${this.selectedShopId}/floormap_image`),
      axios.get('/shop/room/keep')
    ]))
    .then(res => {
      this.shopInfo = res[0].data
      this.info = res[1].data
      this.schedule = res[2].data
      this.url_floormap_image = res[3].data
      this.keepList = res[4].data
    })
    .catch(ex => { this.error(ex) })
    .finally(() => this.$store.commit('Loading/hide'))
},

步骤3：验证修复效果 #

修改后，updateMemoChecklist调用getData时，会等待其内部所有异步请求完成后再执行后续.then逻辑，此时this.shopInfo等数据已完成更新，console.log能打印出最新值，页面也会实时同步数据，无需手动刷新。

内容的提问来源于stack exchange，提问作者lion-react