Vuex“类型错误：无法读取未定义的属性‘数据’”答案

【问题标题】：Vuex "TypeError: Cannot read property 'data' of undefined"Vuex“类型错误：无法读取未定义的属性‘数据’”
【发布时间】：2019-02-14 21:11:54
【问题描述】：

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

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

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

1.错误

[Vue 警告]：渲染错误：“TypeError：无法读取属性‘数据’ 未定义”

发现于

---> 在资源/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
}

【问题讨论】：

请注意，在 Action.js 中，用于与 localhost 通信的端口是 300，而不是默认的 3000。
我从不同的服务器检索数据。我打算在这个子域部分为管理员创建 1 个子域，我制作 API 数据。在这种情况下，我在 localhost:300 /（子域）上检索数据。并在用户部分从本地主机上的这个子域获取 API 数据：500。@P3tur0
您是否尝试在商店中初始化productlist？ productlist: { products: {}}?
我必须初始化所有数据吗？因为如果只在产品部分我得到另一个错误@Zysce

标签： api vue.js vuex

【解决方案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。如果你不这样做，你以后可能会遇到问题，即删除数组的元素（对象的属性可能会搞砸）。

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

【讨论】：

最好使用<template></template>标签，它不会在最终的html中呈现额外不必要的div。
我得到了同样的错误，相信我我试过了，但它没有用。 :(
您可以添加类似IsProductListInitialized 的计算值，检查this.productList && this.productList.products && this.productList.products.data。然后，将v-if 替换为v-if="IsProductListInitialized"

【解决方案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
}

别忘了根据数据类型进行初始化

【讨论】：