Vuex "TypeError: 정의되지 않은 속성 '데이터'를 읽을 수 없습니다"

Vuex "TypeError: 정의되지 않은 속성 '데이터'를 읽을 수 없습니다"

Vuex와 API를 사용하여 스토어를 통해 데이터를 가져옵니다.저는 Vuex를 처음 사용하는 사람입니다.이전에 표시된 데이터가 로드되지 않았기 때문입니까?그것이 사실이라면 이 오류를 피하는 방법.

메모: 다른 서버에서 데이터를 가져옵니다.API 데이터를 만드는 이 서브도메인 섹션에서 admin을 위한 서브도메인을 1개 만들려고 합니다.이 경우 localhost: 300 / (서브 도메인)에서 데이터를 가져옵니다.user 섹션에서는 localhost에 있는 이 서브 도메인에서 API 데이터를 가져옵니다.500

데이터가 성공적으로 로드되었지만 다음 두 가지 오류가 발생했습니다.

1. 에러

[Vue warn] :렌더 오류: "TypeError: 정의되지 않은 속성 '데이터'를 읽을 수 없습니다."

에서 발견되다.

---> 리소스/js/컴포넌트/Shop.vue에서

2. 에러

TypeError: VueComponent의 Proxy.render(app.js:50035)에서 정의되지 않은 속성 '데이터'를 읽을 수 없습니다.Vue Component.updateComponent(app.js:17094)의 Vue._render(app.js:18850)를 선택합니다.Vue 컴포넌트의 Vue.$mount(app.js:22846)create Component(app.js:19914)의 초기화 시 Vue.$mount(app.js:25245)

데이터:

이 코드를 삭제하면, 에러는 없어집니다.

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

액션.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;
},

}

돌연변이.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
}

앱이 처음 로드될 때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이 경우 필요하지 않은 모든 루프로 상태를 확인합니다.

이 오류를 방지하려면 사용 가능한 모든 데이터를 초기화해야 합니다. 페이지를 열면 데이터가 직접 수신되지 않으므로 이 오류가 발생하고 데이터가 계속 가져오기 때문입니다.스토어 섹션에 다음 코드를 추가합니다.

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

    },
  },
  getters,
  mutations,
  actions
}

데이터 유형에 따라 초기화하는 것을 잊지 마십시오.

언급URL : https://stackoverflow.com/questions/52257707/vuex-typeerror-cannot-read-property-data-of-undefined