I am encountering an issue with a Vuex getter that is supposed to return the state of courseData. Despite the getter being present and having values when I check it using console.log(this.$store.getters), I am unable to access the data. When I try to use
console.log(this.$store.getters.getCourseData)console.log(this.$store.getters['courses/getCourseData'])Component:
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
data() {
return {
data: null,
}
},
methods: {
...mapActions('courses', ['fetchCourseData']),
},
computed: {
...mapGetters('courses', ['getCourseData'])
},
created() {
this.fetchCourseData(this.$route.params.code) // <-- This line sets the state
console.log(this.$store.getters) // <-- List of store getters
console.log(this.$store.getters['courses/getCourseData']) // <-- Returns empty array
console.log(this.$store.getters.getCourseData) // <-- Returns undefined
}
}
</script>
Store:
import axios from 'axios'
export default {
namespaced: true,
state: {
courseData: [],
},
getters: {
getCourseData(state) {
return state.courseData
}
},
actions: {
async fetchCourseData({ commit }, code) {
await axios
.get('teacher/course-management/course/code/' + code)
.then(response => {
commit('SET_COURSE_DATA', response.data.data)
})
}
},
mutations: {
SET_COURSE_DATA(state, courseData) {
state.courseData = courseData
}
},
}