为什么在方法中使用vuex 3.6的state对象时会出现undefined的情况

Question

我正在使用 vue 2.6.11 和 vuex 3.6.0 构建应用程序

我正在构建的页面用于活动注册。使用 API 从数据库中获取 ActiveEvent（事件 ID、日期、位置等）

注册表首先要求提供电子邮件地址。在电子邮件字段模糊后，我们触发 checkEmail()。这应该执行一两个 API 调用。第一个调用检查数据库中是否有电子邮件地址并返回 ParticipantID，如果有，则进行第二次调用以查看参与者是否已使用 Event.EventID 和 ActiveUser.ParticipantID< /p>

正在加载的页面的结构是从路由器调用的页面组件<EventDetail>。它有一个主组件 <EventRegistration> ，它调用两个单独的子组件： <EventRegistrationBlurb> ，它获取状态。ActiveEvent 作为 prop 传递，<EventRegistrationForm> 是直接获取state.ActiveEvent。外部组件<EventRegistration>负责从API获取Event数据并设置state.ActiveEvent，成功执行，

我无法理解的是为什么当我在组件中调用 checkEmail 时， this.ActiveEvent 未定义。当 blurb 组件正确渲染它时，puter 组件正在获取 API 并正确设置状态。如果我将 ActiveEvent 对象放入 EventRegistrationForm 的模板中，它会正确呈现，只是没有及时设置它以便与方法 checkEmail() 进行绑定

我的子组件 <EventRegistrationForm> 中有以下代码：（注意，ActiveEvent 由外部组件设置，并且设置正确）

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'])
}

然后在我的商店：

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

和往常一样，结果是椅子和键盘之间的接口错误。通常从事件列表访问此页面，该列表是标识符为 EventID 的对象数组。当调用单独的事件时，标识符只是 ID，因此有效负载 2 中的代码应该读取

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

我想我会更新 API 以返回一致的标识符，避免以后出现麻烦。只浪费了大约3个小时......