Having an issue with my Vuex getter sending a 0 length Array that has items inside when expanded in the console

Question

I am using Vuex to call a Django API for count data.

state: {
    DailyCycleDate: []
},

getters: {

  DailyCycleDate : state => {
    console.log('Getter')
    console.log('Length of Array: '+state.DailyCycleDate.length)
    console.log(state.DailyCycleDate)
    return state.DailyCycleDate
  }
},

mutations: {

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

      let NewList = []

      NewPatientMap.forEach((value, key) => {
        var NewPatientCycle = value['Current_Cycle_Date']
        console.log('inside mutation')
        state.DailyCycleDate.push(NewPatientCycle)
      });

    }
 },

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

And for some reason I am returning an empty array in the console log:

My question is, how did this array become empty? Is there a sync issue going on? I've been working with promises and TimeOut methods and nothing has helped. How am I able to see the data I need to see while the array is 0?

Could there be an object inside of the array? I've also tried changing it into a object and mapping it. Any advice is greatly appreciated!

Thanks,

I should also note that I am needing this data to be in the label field of a ChartJS barchart

export default {
  extends: HorizontalBar,
  data() {
    return{
    }
  },
  mounted () {
    /* Need to write the API call for chart data here. */
    this.$store.dispatch('DailyCountAction')

    this.renderChart({
    labels: [this.$store.getters.DailyCycleDate],
    datasets: [...]

The array didn't *become* empty. It was initially empty and later populated. Chrome displays live references in its console, so once you `console.log` a reference to an array, the output will update as the data changes. It's normal to see `Array(0)` with a non-zero length later. — tony19, Mar 03 '19 at 06:32
See [demo](https://codepen.io/tony19/pen/rRebam?editors=0011) in Chrome's console — tony19, Mar 03 '19 at 06:58

score 0 · Answer 1 · answered Mar 03 '19 at 06:10

state.DailyCycleDate.push doesn't update state.DailyCycleDate reference.

You need to update reference of state.DailyCycleDate to make getters re-calculated again

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

    let NewList = []

    NewPatientMap.forEach((value, key) => {
      var NewPatientCycle = value['Current_Cycle_Date']
      console.log('inside mutation')
      NewList.push(NewPatientCycle)
    });
    state.DailyCycleDate = state.DailyCycleDate.concat(NewList)
  }
}

Having an issue with my Vuex getter sending a 0 length Array that has items inside when expanded in the console

1 Answers1