title: Undefined vuex 3 state variable
body: <p>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:</p>
  
  <blockquote>
    <p>[Vue warn]: Error in render: "TypeError: _vm.product is undefined"</p>
  </blockquote>
  
  <p><em>product</em> is just and element of <em>products</em>, an array stored in the Vuex state that is filled after the next line is executed just after creating the Vue instance:</p>
  
  <pre><code>vm.$store.dispatch('getProducts')
  </code></pre>
  
  <p>In my component, I get the <em>product</em> by using the next computed property:</p>
  
  <pre><code>product: function () {
      return this.$store.getters.getProductById(this.id)
    },
  </code></pre>
  
  <p><em>this.id</em> is sent by Vue Router (and is properly defined). The getter looks like this:</p>
  
  <pre><code>getProductById: (state) =&gt; (id) =&gt; {
  return state.products.find(product =&gt; product.id === id)
  </code></pre>
  
  <p>},</p>
  
  <p>After this warning appears, the actual <em>product</em> 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.</p>
  
  <p>Any ideas on how to make Vue wait for Vuex to load data in a proper and efficient way?</p>