Vuex 操作无法访问属性值

Question

我似乎无法将数据传递给我的 Vuex 操作。我总是收到错误消息TypeError: can't access property x, data is undefined。我已经做了一些不同的方法来传递属性值，但我无法让它发挥作用。你能看看我的代码，我做错了什么吗？

商店：

import axios from 'axios'

export default {
  namespaced: true,
  state: {
    announcements: []
  },
  getters: {},
  actions: {
    createAnnouncement({ commit }, courseId, data) {
      return new Promise((resolve, reject) => {
        axios
        .post(`teacher/courses/announcements/create/${courseId}`, { title: data.title, message: data.message })
        .then((response) => {
          commit('ADD_ANNOUNCEMENT', response.data.data)
          resolve(response)
        })
        .catch((error) => { reject(error) })
      })
    }
  },
  mutations: {
    ADD_ANNOUNCEMENT(state, newAnnouncement) {
      state.announcements.push(newAnnouncement)
    }
  }
}

组件：

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  data() {
    return {
      title: '',
      message: '',
    }
  },
  computed: {
    ...mapGetters('courses', ['getCourseData'])
  },
  methods: {
    ...mapActions('announcements', ['createAnnouncement']),
    onSubmit() {
      const { announcementTitle, announcementMessage } = this
      const courseId = this.getCourseData.id
      this.createAnnouncement(courseId, { title: announcementTitle, message: announcementMessage }) 
    }
  }
}
</script>

Answer 1

动作只接受两个参数，context 和一个可选的payload。

尝试将您的操作更改为

createAnnouncement({ commit }, { courseId, data }) {
  //...
}

并发送它

const payload = {
  courseId: this.getCourseData.id,
  data: {
    title: this.announcementTitle,
    message: this.announcementMessage
  }
}
this.createAnnouncement(payload)

见https://vuex.vuejs.org/api/#actions