I am facing an issue with passing data to my Vuex action. Each time I try, I encounter the error message
TypeError: can't access property x, data is undefinedStore:
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)
}
}
}
Component:
<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>