Undefined vuex 3 state variable

Question

I'm trying to set up an application using Vue 2.5.2 and Vuex 3.0.1 and the only thing I cannot get rid of is this warning:

[Vue warn]: Error in render: "TypeError: _vm.product is undefined"

product is just and element of products, an array stored in the Vuex state that is filled after the next line is executed just after creating the Vue instance:

vm.$store.dispatch('getProducts')

In my component, I get the product by using the next computed property:

product: function () {
    return this.$store.getters.getProductById(this.id)
  },

this.id is sent by Vue Router (and is properly defined). The getter looks like this:

getProductById: (state) => (id) => {
return state.products.find(product => product.id === id)

},

After this warning appears, the actual product information is displayed properly so I guess that Vue tries to load and render the information before Vuex has actually retrieved it from the server.

Any ideas on how to make Vue wait for Vuex to load data in a proper and efficient way?

Erwol Erwol · Accepted Answer · 2017-12-12T03:08:56

I found the issue. As specified in the Vue 2 API, Vue can only guarantee that an object will be reactive if it was properly initialized.

In my Vuex state I had indeed initialize the product object that I was trying to access through this.$store.getters.getProductById(this.id). The empty structure looked like this: product: {}

But I was missing an array that should be places inside a product's nested object. So finally I solved the problem by initializing the structure as follows: `

product: {
  color_group: {
    colors: []
  }
}

` And that was all.

Undefined vuex 3 state variable

1 Answers