如果另一端 Vue、JS 则运行函数答案

【问题标题】：Run function if other end Vue, JS如果另一端 Vue、JS 则运行函数
【发布时间】：2019-04-19 02:02:20
【问题描述】：

如果另一端我不知道如何运行代码

函数showAvailableTable刷新item并添加数据到vuex $store

如果 showAvailableTable() 正确完成，我需要从 ////START 到 //// END 运行代码（axios 将数据添加到 $store）

我应该如何正确地做？

showAvailableTable () {
  var obj = this.firstStepData
  var nullCount = 0
  var self = this
  for (var key in obj) {
    if (obj.hasOwnProperty(key) && obj[key] == null) {
      nullCount++
    }
  }
  if (nullCount === 0) {
    var reservationId = this.firstStepData.restaurant.id
    var restaurantSize = this.firstStepData.tableSize.value
    var reservationDate = this.firstStepData.reservationDate
    var reservationTime = this.firstStepData.reservationTime
    axios
      .get(self.$store.state.apiUrl + 'reservation/tables/?size=' + restaurantSize + '&restaurant_id=' + reservationId + '&date=' + reservationDate + '&hour=' + reservationTime)
      .then(response => {
        this.$store.commit('updateRestaurantTableList', response.data)
      })
      .catch(error => {
        console.log(error)
      })
    this.$store.commit('updateShowTable', true)
  }
},

下一个函数，这个函数预订表，我运行this.showAvailableTable()来刷新$store中的数据

firstStepBook (event, id) {
  this.showAvailableTable()
  ///////////////////START
  var isResData = false
  this.dataLoading = true
  for (var obj in this.restaurantTableList) {
    if (this.restaurantTableList[obj].id === id) {
      if (this.restaurantTableList[obj].res_tab.length > 0) {
        isResData = true
      }
      break
    }
  }
  if (isResData && !event.currentTarget.classList.contains('isSelected')) {
    alert('someone is booking this table, choose another one')
  } else {
    if (event.currentTarget.classList.contains('isSelected')) {
      this.deleteTmpReservation(this.reservationTmp.id)
      this.dataLoading = false
    } else {
      if (this.reservationTmp.id !== undefined) {
        this.deleteTmpReservation(this.reservationTmp.id)
        this.dataLoading = false
      }
      var self = this
      axios.post(self.$store.state.apiUrl + 'reservation/', {
        restaurant_table: id,
        clients_number: self.firstStepData.tableSize.value,
        reservation_time: self.firstStepData.reservationTime,
        reservation_date: self.firstStepData.reservationDate
      })
        .then(function (response) {
          self.showAvailableTable()
          self.$store.commit('updateReservationTmp', response.data)
          self.dataLoading = false
        })
        .catch(function (error) {
          console.log(error)
        })
      //this.$store.commit('updateStep', 2)
    }
  }///////////////////END
},

提前谢谢你

【问题讨论】：

把它放在一个函数中并调用它？
也许让showAvailableTable返回一个promise并将你的代码包装在showAvailableTable().then(...)中
最好使用Vuex - subscribe 来响应商店的变化。
Richard Matsen 如何在这个函数中返回 promise？
看到这个问题Returning an Axios Promise from function并按照createRequest1()的模式。

标签： javascript vue.js vuex

【解决方案1】：

如果仅在 showAvailableTable() 内调用突变，这可能适合您

参考Vuex subscribe

mounted() {
  this.$store.subscribe((mutation, state) => {
    if (mutation.type === 'updateRestaurantTableList') {
      ///////////////////START
      ...
      ///////////////////END
    }
  })
},
methods: {
  firstStepBook (event, id) {
    // call to updateRestaurantTableList triggers above subscription
    this.showAvailableTable()  
  }
}

【讨论】：