Vuex“ TypeError：无法读取未定义的属性'data'”

Question

我使用Vuex和API通过商店获取数据。我是使用Vuex的初学者。 是否因为先前显示的数据尚未加载？如果是这样，如何避免此错误。

注意：：我从其他服务器上检索数据。我打算在此子域部分中为管理员创建1个子域，以制作API数据。在这种情况下，我在本地主机上检索数据：300 /（子域）。并在用户部分中从本地主机上的此子域中获取API数据：500

数据已成功加载，但是出现了2个错误：

1。错误

  

[Vue警告]：渲染错误：“ TypeError：无法读取属性'data'   的不确定”

     

位于

     

--->在resources / js / components / Shop.vue          

2。错误

  

TypeError：无法读取未定义的属性“数据”       在Proxy.render（app.js：50035）       在VueComponent.Vue._render（app.js：18850）       在VueComponent.updateComponent（app.js：17094）       在Watcher.get（app.js：17448）       在新的Watcher（app.js：17437）       在mountComponent（app.js：17101）       在VueComponent.Vue。$ mount（app.js：22846）       在VueComponent.Vue。$ mount（app.js：25245）       在初始化时（app.js：18443）       在createComponent（app.js：19914）

数据：

如果我删除此代码，错误将消失：

  <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">

Shop.vue

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');
  },

Action.js

export default{
  GetProductList(context){
     let url ='http://localhost:300/api/v1/product';
  axios.get(url)
      .then(response => {
        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 => {
          console.log(error);
      });
  }
}

Getters.js

export default{
  productlist(state){
  return  state.productlist;
},

}

Mutations.js

export default{
  dataProduct(state,payload){
    state.productlist = payload;
  }
}

Store.js

import actions from './actions';
import mutations from './mutations';
import getters from './getters';
export default{
  state:{
    productlist:[],
  },
  getters,
  mutations,
  actions
}

Answer 1

首次加载应用程序时，您的productList尚未初始化，因此无法访问其对象的属性。您需要做的是将v-for元素包装到另一个带有v-if指令的元素中，如下所示：

<template v-if="productList.products.data">
    <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">
</template>

附带说明-一种好的做法是将:key与v-for一起使用。键应为唯一值，例如对象的ID。如果不这样做，以后可能会遇到问题，即删除数组的元素（对象的属性可能会弄乱）。

此外，请注意，我用另一个v-for包裹了您的div，而不是将v-if放在v-for div的内部。这是因为如果您在与v-if相同的元素中使用v-for，则将在每个循环中检查条件，在这种情况下，则不需要。

Answer 2

您必须初始化所有可用数据以避免此错误。因为打开页面时。不会直接接收数据，因此会出现此错误，并且仍会获取数据。将此代码添加到商店部分：

import actions from './actions';
import mutations from './mutations';
import getters from './getters';
export default{
  state:{
    productlist:{
      products:{},
      categories:[],
      pagination:{},
      productcolors:[],
      productsizes:[]

    },
  },
  getters,
  mutations,
  actions
}

不要忘记根据数据类型进行初始化