Unable to update the Vuex store and retrieve array

Question

I'm dispatching an array of objects to the Veux store and trying to get the data using "getters" from Vuex. It returns undefined. It is however working for a boolean variable in the same Vuex. For the array, it is not giving a proper result

I am using Vuex to update an array of objects across vue components.

I am dispatching the array of objects

committing the array through "actions"

setting and updating the value through "mutations"

Declaring the array through "state"

finally, from the Vue component, accessing the array through "getters"

I expect Vuex to return the array of objects when I access using "getters"

The store code is as given below

export default new Vuex.Store({
  state: {
    
      loading: false,
      compoData: []
  },

  mutations: {
 
    setLoading(state, payload) {
      state.loading = payload
    },

    setCompoData(state, payload) {
       state.compoData = payload.data
     }
  },


actions: {
    
    setLoading({
      commit
    }, payload) {
      commit('setLoading', payload)
    },

    setCompoData({
      commit
    }, payload) {
      commit('setCompoData', payload)
    },

  },
  
  
  getters: {
    
    loading(state) {
      return state.loading
    },
    
    compoaData(state){
      return state.compoData
    }

  }
})

Vue component code is as given below. I am dispatching the array of objects "compoData" from the component to the store

  someFunction(){
            
    .....
    some code
    .....
    this.$store.dispatch('setLoading',false)
    this.$store.dispatch('setCompoData',{data:this.compoData})
           
            
        },

Getting the values from store

       
       
       gettingCompoData(){
            console.log(this.$store.getters.compoData)
            
        },

Though it works fine with the computed variable "loading", it does not work with the "compoData" array of objects .

I tested it with the below function

test(){
    console.log(this.compoData, this.loading);
    this.$store.dispatch('setCompoData',{data:this.compoData})
    console.log(this.$store.getters.compoData, this.$store.getters.loading)
},

And this is the screenshot of the result I got this log result from the "test" function

It is clear that I am not sending an undefined array. But what I am getting from the store getters is undefined. Strangely, it is working for the boolean variable "loading" and it does return a valid result. I'm baffled as to why it does not return the array of objects. please help me out...

Any help would be appreciated. Thank you

I don't see anything wrong, most likely your payload is undefined (of whatever the value "it does not work" means). — kursus
Thanks for your reply Kursus. I have edited the question by including a screenshot of the log. please see that and let me know if you have any clue what might be happening in my case. Thanks again. — rhythmo

fila90 fila90 · Accepted Answer · 2019-09-03T22:09:05

you have a typo. in store you defined a getter compoaData and when getting values from store you're looking for compoData

Unable to update the Vuex store and retrieve array

1 Answers