메소드에서 vuex 3.6의 상태 객체를 사용할 때 정의되지 않음이 나타나는 이유는 무엇입니까?

Question

vue 2.6.11과 vuex 3.6.0

을 사용하여 애플리케이션을 구축하고 있습니다.

제가 만들고 있는 페이지는 이벤트 등록을 위한 페이지입니다. API를 사용하여 데이터베이스에서 ActiveEvent(이벤트 ID, 날짜, 위치 등) 가져오기

등록 양식에서는 먼저 이메일 주소를 요구합니다. 이메일 필드가 흐릿해진 후 checkEmail()을 트리거합니다. API 호출을 한두 번 수행해야 합니다. 첫 번째 호출은 데이터베이스에 이메일 주소가 있는지 확인하고 참가자 ID를 반환합니다. 그렇다면 참가자가 Event.EventID 및 ActiveUser.ParticipantID를 사용했는지 확인하기 위해 두 번째 호출이 이루어집니다. < /p>

로드되는 페이지의 구조는 라우터에서 호출되는 페이지 구성요소 <EventDetail>입니다. 여기에는 상태를 가져오는 두 개의 별도 하위 구성요소인 <EventRegistrationBlurb>를 호출하는 기본 구성요소 <EventRegistration>가 있습니다. ActiveEvent는 prop으로 전달되며, <EventRegistrationForm>은 state.ActiveEvent를 직접 가져오는 것입니다. 외부 구성 요소 <EventRegistration>는 API에서 이벤트 데이터를 가져오고 성공적으로 실행된 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'])
}

Answer 1

늘 그렇듯이 결과적으로 의자와 키보드 사이의 인터페이스에 결함이 발생합니다. 이 페이지는 일반적으로 식별자가 EventID인 개체의 배열인 이벤트 목록에서 액세스됩니다. 별도의 이벤트를 호출할 때 식별자는 단지 ID이므로 페이로드 2의 코드는

로 읽어야 합니다. 으아악

향후 문제가 발생하지 않도록 일관된 식별자를 반환하도록 API를 업데이트할 예정입니다. 3시간 정도만 낭비했어요...