VueJS + VUEX -数据传输问题

oxosxuxt  于 2023-03-24  发布在  Vue.js
关注(0)|答案(1)|浏览(170)

我的组件:

<div id="event-picker">
  <template v-for="event in $store.state.events">
    <a href="#" v-on:click.prevent="$store.dispatch('prepareEventForm', event)">{{ event.artist }}</a>
  </template>
</div>

我的商店(突变):

prepareEventForm(state, event) {
  state.form.time = event.time
  state.form.date = event.date
  state.form.event = event.event
  state.form.artist = event.artist
  state.form.organizer = event.organizer
  state.form.location = event.location
  state.showForm = true
}

我得到的错误是Cannot read property 'time' of undefined
问题出在哪里?
编辑:
这是我的行动方法:

prepareEventForm({ commit }) {
  commit('prepareEventForm')
}
ddrv8njm

ddrv8njm1#

您得到该错误的原因是传递给prepareEventForm突变的event对象是undefined
这是因为当您调用$store.dispatch('prepareEventForm', event)时,它会调用您的prepareEventFormaction,并将event作为第二个参数传入。
您需要添加event作为action的第二个参数,并将其作为commit调用中的第二个参数传递(这就是调用prepareEventFormmutation 的原因):

prepareEventForm({ commit }, event) {
  commit('prepareEventForm', event)
}

相关问题