api - Vuex "TypeError: Cannot read property ' 未定义数据'

Question

我使用 Vuex 和 API 通过商店获取数据。我是 Vuex 的初学者。 是不是之前显示的数据没有加载？如果为真，如何避免此错误。

注意: 我从不同的服务器检索数据。我打算在这个子域部分为管理员创建 1 个子域，我制作 API 数据。在这种情况下，我在本地主机上检索数据:300/(子域)。并在用户部分从本地主机上的子域获取 API 数据:500

数据已成功加载，但出现以下 2 个错误:

<强>1。错误

[Vue warn]: Error in render: "TypeError: Cannot read property 'data' of undefined"

found in

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

<强>2。错误

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)

数据:

如果我删除这段代码，错误就消失了:

  <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-if 指令将您的 v-for 元素包裹起来，如下所示:

<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 一起使用。 Key 应该是一个唯一的值，例如对象的 id。如果不这样做，您以后可能会遇到问题，即删除数组的元素(对象的属性可能会被弄乱)。

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