Vuex getters not returning the data

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
    }
  },
}

Does this answer your question? [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Estus Flask, Jul 23 '21 at 04:20
courseData is assigned asynchronously. You try to access it immediately. getters.getCourseData is a mistake because it's namespaced — Estus Flask, Jul 23 '21 at 04:21
I tried to do it synchronously just to test it out and the issue still persists. I tried to add setTimeOut() method on retrieving the getters and it is still the same. — LAZYASSKID, Jul 23 '21 at 05:01
You tested it the wrong way. You need to await for the action. With promises. And obviously it won't succeed if the state failed to update. — Estus Flask, Jul 23 '21 at 06:30
The state is updating okay my main problem is I can not retrieve the value of the getter. Even in my chrome Vue.js devtools the getter and data values are okay. — LAZYASSKID, Jul 23 '21 at 06:47
Then the problem is that you access a getter at the wrong moment. — Estus Flask, Jul 23 '21 at 06:53
try ```this.fetchCourseData(this.$route.params.code).then(()=>{ console.log(this.$store.getters['courses/getCourseData']) })``` — tjp, Jul 23 '21 at 09:28

score 1 · Answer 1 · answered Dec 29 '21 at 12:31

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
  }

Vuex getters not returning the data

1 Answers1