Exécuter la fonction si autre fin Vue, JS

Question

Je ne sais pas comment exécuter le code à l'autre bout.

La fonction showAvailableTable rafraîchit l'élément et ajoute les données au $store de vuex.

J'ai besoin d'exécuter le code de ////START à //// END si showAvailableTable() a été fait correctement (axios ajoute les données à $store).

comment dois-je faire correctement ?

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

Fonction suivante, cette fonction de réservation de table, je lance this.showAvailableTable() pour rafraîchir les données dans $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
},

merci d'avance

Answer 1

Cela pourrait vous convenir si la mutation n'est appelée qu'au sein de showAvailableTable()

Réf. S'abonner à Vuex

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