为什么在方法中使用vuex 3.6的state对象时会出现undefined的情况
我正在使用 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)
}
}
}