VueJS + VUEX - 关于数据传输的问题

Question

我的组件：

<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')
}

Answer 1

您收到该错误的原因是传递给您的 prepareEventForm 突变的 event 对象是 undefined。

这是因为当您调用 $store.dispatch('prepareEventForm', event) 时，它会调用您的 prepareEventForm 操作，并将 event 作为第二个参数传入。

您需要添加 event 作为您操作的第二个参数，并将其作为第二个参数传递给您的 commit 调用（这就是调用 prepareEventForm 变异):

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

VueJS + VUEX - 关于数据传输的问题

VueJS + VUEX - Problems Concerning Data Transfer

vue.js

vuex