Getting error push in not a function while trying to push element into an array in store

vuex

#1

Hello everyone,
I keep getting the error : Uncaught TypeError: state.myproposedMarkets.push is not a function.
so here is my app.js code :

const state = {
  myproposedMarkets:[],
}
const mutations = {
  addProposedMarket(state,value){
    console.log('value in store',value)
    state.myproposedMarkets.push(value)
  }
}
export default {
  state,
  mutations,
  actions,
}

And then in my component i call the mutation like this :

 add(item){
       this.$store.commit('addProposedMarket',item)
    }

So whenever add method gets called it calls the mutation trying to push my element in the array and i keep getting the error mentioned above. The “item” element is an object and here is it’s format:
{name:“namesample”, description :“description”}
And what i really do not get is that even when i tried in the mutation doing : state.myproposedMarkets.push(“table”) it still gave me the same error , so i really can not push anything into it!!

Thank you for your clarifications ,


#2

Hi,

Your code looks fine apart from the non existing actions export, the error lies most probably somewhere else. Try to log your state in the mutation (or use Vue dev tools) to know more.


#3

Hi,
Thank you for responding, i actually i have actions in my code and some other mutations but i didn’t put it in the code above cause it was not relative to my problem.
It is driving me crazy, and as far as i understood, i am getting the “state.myproposedMarkets.push is not a function” error because it thinks that “state.myproposedMarkets” is not an array, so it doesn’t have a push function. And looking at my code, i do not know another way to declare an array…


#4

Depending on the size of your code base but put it here or in a fiddle if it’s not too much, else look for state = or state.myproposedMarkets = anywhere else as your array is correctly assigned here. What is the type of the variable when you log it in your mutation ?


#5

So here is my structure: i have a store folder in which i have (getters.js , index.js, and module folder)
in the module folder i have app.js file in which i have this :

import axios from "axios";
const state = {
 myMenu: {},
 myproposedMarkets:[],
 isLoading: true,
 name: "Sahar"
}

const mutations = {
 setLoading (state, isLoading) {
   state.isLoading = isLoading
 },
 updateName(state, name) {
  state.name = name
 },

 addProposedMarket(state,value){
   console.log('value in store',value)
   console.log('typeof', typeof(state.myproposedMarkets))
   state.myproposedMarkets.push(value)
 }
}

const actions = {
}

export default {
 state,
 mutations,
 actions,
}

and in getters.js i do : const myproposedMarkets = state=> state.app.myproposedMarkets and i export “myproposedMarkets”

  • when i console log the stype of state.myproposedMarkets the result is : object.
  • and no i do not have state.myproposedMarkets elsewhere other then app.js and getters.js …
    And now i have tried something else:
    under the modules folder i created a new module called : data.js in which i have this code :
const state = {
  marketarray:[]
}

const mutations = {
    ADD_MARKET (state,value){
        console.log('item in data', value)
        console.log('type', typeof(state.marketarray))
        state.marketarray.push(value)
        console.log("var", state.marketarray)
       // state.marketarray = [] // this is just for testing
    }

}

const actions = {

}

export default {
  state,
  mutations,
  actions,
}

and in getters i export marketarray same way i did in app.js … and in index.js i registered the module.
What is weird now : is that it works just fine and i dnt have the error anymore … It is the same code for god’s sake !!! i am declaring same way , pushing the same item doing the same thing !!!