vuex 3.6为啥在方法中使用它时我的状态对象未定义

Posted 2023-02-22

【中文标题】vuex 3.6为啥在方法中使用它时我的状态对象未定义

【英文标题】：vuex 3.6 why is my state object undefined when using it inside a methodvuex 3.6为什么在方法中使用它时我的状态对象未定义

【发布时间】：2022-01-20 11:50:13

【问题描述】：

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

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

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

正在加载的页面结构是从路由器调用的页面组件。这有一个主组件 调用两个单独的子组件： 获取 state.ActiveEvent 作为道具传递和 直接获取 state.ActiveEvent。外部组件 负责从 API 获取 Event 数据并设置成功的 state.ActiveEvent，

我不明白为什么当我在我的组件中调用 checkEmail 时， this.ActiveEvent 是未定义的。 puter 组件正在获取 API 并正确设置状态，因为 Blub 组件正在正确呈现它。如果我将 ActiveEvent 对象放入它正确呈现的 EventRegistrationForm 的模板中，那么它只是没有及时设置以便绑定到方法 checkEmail()

我的子组件 中有以下代码：（注意，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 = `$baseUrlgetParticipantbyEmail`
    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 = `$baseUrlgetParticipantForEvent`
      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)
    
  

【问题讨论】：

您不会在任何地方使用 SET_ACTIVE_EVENT。即使这样做，请确保在访问 ActiveEvent 之前这样做

感谢 Etus，它是从外部组件中的调度操作调用的。这不是异步计时的事情，因为当用户输入他们的电子邮件地址时，API 调用和方法的触发之间存在显着延迟

【参考方案1】：

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

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

我想我会更新 API 以返回一致的标识符并避免以后的头痛。只在这上面浪费了大约 3 个小时...