VueJS, Vuex, Getter is showing as an empty array, but console.log shows it's an object with all the values

Question

This is the method I'm using, pretty simple.

DailyCountTest: function (){
  this.$store.dispatch("DailyCountAction")
  let NewPatientTest = this.$store.getters.NewPatientCountGET
  console.log(NewPatientTest)

}

The getter gets that data from a simple action that calls a django backend API.

I'm attempting to do some charting with the data so I need to assign them to variables. The only problem is I can't access the variables.

This is what the console looks like

And this is what it looks like expanded.

You can see the contents, but I also see empty brackets. Would anyone know how I could access those values? I've tried a bunch of map.(Object) examples and couldn't get any success with them.

Would anyone have any recommendation on how I can manipulate this array to get the contents?

Thanks!

Here is the Vuex path for the API data

Action:

    DailyCountAction ({ commit }) {
      axios({
          method: "get",
          url: "http://127.0.0.1:8000/MonthlyCountByDay/",
          auth: {
            username: "test",
            password: "test"
          }
        }).then(response => {
          commit('DailyCountMutation', response.data)
          })
  },

Mutation:

    DailyCountMutation(state, DailyCount) {
      const NewPatientMap = new Map(Object.entries(DailyCount));

      NewPatientMap.forEach((value, key) => {
        var NewPatientCycle = value['Current_Cycle_Date']
        state.DailyCount.push(NewPatientCycle)
      });
    }

Getter:

  NewPatientCountGET : state => {
    return state.DailyCount
  }

State:

    DailyCount: []

Answer 1

This particular description of your problem caught my eye:

The getter gets that data from a simple action that calls a django backend API

That, to me, implies an asynchronous action and you might be getting a race condition. Would you be able to post a sample of your getter function to confirm my suspicion?

If that getter does indeed rely on an action to populate its contents, perhaps something to the effect of the following might do?

DailyCountTest: async () => {
  await this.$store.dispatch('DailyCountAction')
  await this.$store.dispatch('ActionThatPopulatesNewPatientCount')
  let NewPatientTest = this.$store.getters.NewPatientCountGET
  // ... do whatever with resulting array
}

Answer 2

You can also try with a computer property. You can import mapGetters

import { mapGetters } from 'vuex'

and later in computed properties:

computed: {
    ...mapGetters(['NewPatientCountGET'])
}

then you can use your NewPatientCountGET and it will update whenever the value changes in the store. (for example when the api returns a new value)

Hope that makes sense