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

操作只接受两个参数，上下文和可选的有效负载。

尝试将您的操作更改为

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