為什麼在方法中使用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 // 
我想我會更新 API 以返回一致的標識符，避免以後出現麻煩。只浪費了大約3個小時......