title: Vuex "TypeError: Cannot read property 'data' of undefined"
body: <p>I take data through the store using Vuex and API. I'm a beginner using Vuex.
  Is it because the data displayed previously has not been loaded? If it's true how to avoid this error.</p>
  
  <p><strong>NOTE :</strong> I retrieve data from a different server. I intend to make 1 sub domain for admin in this sub domain section I make the API data. in this case I retrieve data on localhost: 300 / (sub domain). and in the user section takes API data from this sub domain that is on localhost: 500</p>
  
  <p>The data has been successful loaded but I got this 2 errors:</p>
  
  <p><strong>1. Error</strong></p>
  
  <blockquote>
    <p>[Vue warn]: Error in render: "TypeError: Cannot read property 'data'
    of undefined"</p>
    
    <p>found in</p>
    
    <p>--->  at resources/js/components/Shop.vue
           </p>
  </blockquote>
  
  <p><strong>2. Error</strong></p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'data' of undefined
        at Proxy.render (app.js:50035)
        at VueComponent.Vue._render (app.js:18850)
        at VueComponent.updateComponent (app.js:17094)
        at Watcher.get (app.js:17448)
        at new Watcher (app.js:17437)
        at mountComponent (app.js:17101)
        at VueComponent.Vue.$mount (app.js:22846)
        at VueComponent.Vue.$mount (app.js:25245)
        at init (app.js:18443)
        at createComponent (app.js:19914)</p>
  </blockquote>
  
  <p><strong>Data :</strong>
  <a href="https://i.stack.imgur.com/ff9J5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ff9J5.png" alt="IMG RESULT"></a></p>
  
  <p>If I delete this code, the errors are gone:</p>
  
  <pre><code>  &lt;div class="col-sm-6 col-md-4 col-lg-3 p-b-35 " v-for="(product,index) in productlist.products.data"  :class="product.category_slug"&gt;
  </code></pre>
  
  <p><strong>Shop.vue</strong></p>
  
  <pre><code>export default {
    components:{
        'pagination':Pagination,
    },
    data(){
      return{
        selected: "Choose Province",
       inputSearch:'',
       filterForm:{
         color:[],
         sortBy:'',
         productType:[],
         size:[],
         },
         product_color_id:0,
         quickview:null,
         showQuickview:false,
  
      }
    },
    computed: {
        productlist(){
          return this.$store.getters.productlist;
        }
  
    },
    created(){
      if (this.productlist.length ) {
         return;
      }
      this.$store.dispatch('GetProductList');
    },
  </code></pre>
  
  <p><strong>Action.js</strong></p>
  
  <pre><code>export default{
    GetProductList(context){
       let url ='http://localhost:300/api/v1/product';
    axios.get(url)
        .then(response =&gt; {
          context.commit('dataProduct',response.data);
          window.scrollTo(0, 0);
          if($('.js-show-filter').hasClass('show-filter')) {
              $('.js-show-filter').removeClass('show-filter');
              $('.panel-filter').slideUp(400);
          }
          if($('.js-show-search').hasClass('show-search')) {
              $('.js-show-search').removeClass('show-search');
              $('.panel-search').slideUp(400);
          }
        })
        .catch(error =&gt; {
            console.log(error);
        });
    }
  }
  </code></pre>
  
  <p><strong>Getters.js</strong></p>
  
  <pre><code>export default{
    productlist(state){
    return  state.productlist;
  },
  
  }
  </code></pre>
  
  <p><strong>Mutations.js</strong></p>
  
  <pre><code>export default{
    dataProduct(state,payload){
      state.productlist = payload;
    }
  }
  </code></pre>
  
  <p><strong>Store.js</strong></p>
  
  <pre><code>import actions from './actions';
  import mutations from './mutations';
  import getters from './getters';
  export default{
    state:{
      productlist:[],
    },
    getters,
    mutations,
    actions
  }
  </code></pre>