Question

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

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

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

我应该如何正确做？

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
},

先谢谢您

Answer 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()  
  }
}

如果另一端Vue，JS

1 个答案: