Vuex getters not returning the data - vue.js

Question

I have a Vuex getters that return the state of courseData but for some reason, I couldn't access it. I tried to do console.log(this.$store.getters) and the getter that I am trying to access is present and has values. But when I try to do console.log(this.$store.getters.getCourseData) or console.log(this.$store.getters['courses/getCourseData']) it returns an empty array instead of an object.
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
}
},
}

Answer 1

Since you already use async/await in your action, also use it on your created method.
async created() {
await 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
}