Pourquoi undefined apparaît-il lors de l'utilisation de l'objet state de vuex 3.6 dans une méthode ?

Question

Je construis l'application en utilisant vue 2.6.11 et vuex 3.6.0

La page que je construis est destinée à l'inscription aux événements. Obtenez ActiveEvent (ID d'événement, date, lieu, etc.) à partir de la base de données à l'aide de l'API

Le formulaire d'inscription demande d'abord une adresse e-mail. Une fois le champ email flou, nous déclenchons checkEmail(). Cela devrait effectuer un ou deux appels API. Le premier appel vérifie s'il y a une adresse e-mail dans la base de données et renvoie le ParticipantID, si c'est le cas, le deuxième appel est effectué pour voir si le participant a utilisé Event.EventID et ActiveUser.ParticipantID < /p>

La structure de la page en cours de chargement est le composant de page <EventDetail> appelé depuis le routeur. Il possède un composant principal <EventRegistration> qui appelle deux sous-composants distincts : <EventRegistrationBlurb> qui obtient le statut. ActiveEvent est passé en tant qu'accessoire, <EventRegistrationForm> doit obtenir directement state.ActiveEvent. Le composant externe <EventRegistration> est responsable de l'obtention des données d'événement de l'API et de la définition de l'état.ActiveEvent, exécuté avec succès,

Ce que je n'arrive pas à comprendre, c'est pourquoi lorsque j'appelle checkEmail dans le composant, this.ActiveEvent n'est pas défini. Tandis que le composant Blurb le restitue correctement, le composant ordinateur obtient l'API et définit correctement l'état. Si je mets l'objet ActiveEvent dans le modèle de EventRegistrationForm, il s'affiche correctement, il n'est tout simplement pas défini à temps pour se lier avec la méthode checkEmail()

J'ai le code suivant dans mon composant enfant <EventRegistrationForm> : (notez que ActiveEvent est défini par le composant externe et est défini correctement)

methods: {
    ...mapActions(['CheckParticipantByEmail']),
    async checkEmail () {
      const payload = {
        email: this.form.email,
        EventID: this.ActiveEvent.EventID  // <-- THIS IS UNDEFINED???
    }
    await this.CheckParticipantByEmail(payload)
  }
},
computed: {
  ...mapState(['ActiveEvent', 'ActiveUser'])
}

Puis dans mon magasin :

state: {
  ActiveEvent: {},
  ActiveUser: {}
},
mutations: {
  SET_ACTIVE_EVENT (state, payload) {
    state.ActiveEvent = payload
  },
  CHECK_PARTICIPANT_BY_EMAIL (state, payload) {
    state.ActiveUser = payload
  },
  GET_PARTICIPANT_FOR_EVENT (state, payload) {
    state.ActiveUser = payload
  }
},
actions: {
  async CheckParticipantByEmail ({ commit }, payload) {
    console.log('payload', payload)
    const baseUrl = process.env.VUE_APP_API_URL
    const url = `${baseUrl}getParticipantbyEmail`
    const { email, EventID } = payload
    const response = await axios.post(
      url,
      {
        EmailAddress: email
      }
    )
    const User = await response.data[0]
    commit('CHECK_PARTICIPANT_BY_EMAIL', User)
    if (User.ParticipantID > 0) {
      const baseUrl = process.env.VUE_APP_API_URL
      const url2 = `${baseUrl}getParticipantForEvent`
      const payload2 = {
        ParticipantID: User.ParticipantID,
        EventID: EventID
      }
      alert('URL2: ' + url2)
      alert('payload2 participant: ' + payload2.ParticipantID)
      alert('payload2 event: ' + payload2.EventID)
      const response2 = await axios.post(
        url2,
        payload2
      )
      // console.log('response: ', response.data[0])
      const payload3 = response2.data[0]
      commit('GET_PARTICIPANT_FOR_EVENT', payload3)
    }
  }
}

Answer 1

Comme d'habitude, le résultat est une interface défectueuse entre la chaise et le clavier. Cette page est généralement accessible à partir de la liste d'événements, qui est un tableau d'objets avec l'identifiant EventID. Lors de l'appel d'un événement distinct, l'identifiant est simplement l'ID, donc le code dans la charge utile 2 devrait se lire

const payload2 = {
    ParticipantID: User.ParticipantID,
    EventID: ID // <- NOTE change of identifier.
  }

Je pense que je vais mettre à jour l'API pour renvoyer des identifiants cohérents afin d'éviter des problèmes à l'avenir. Seulement perdu environ 3 heures...