Vuex 스토어에서 Vue-Resource 사용 중 최대 콜스택 크기 오류 가져오기

Vuex 스토어에서 Vue-Resource 사용 중 최대 콜스택 크기 오류 가져오기

vuex를 사용하여 api에서 컴포넌트로 어레이를 가져오려고 하는데 난감해져서 아마 이 작업을 시도할 수 없을 것 같습니다.컴포넌트에서 API에 직접 액세스하여 다음과 같이 셋업했습니다.

data () {
 return {
  catalog:[],
 }
},
created() {
 this.$http.get('https://example.net/api.json').then(data => {
  this.catalog = data.body[0].threads;
 })
}

참고로 json은 다음과 같습니다.

[{
"threads": [{
 "no: 12345,
 "comment": "comment here",
 "name": "user"
}, {
 "no: 67890,
 "comment": "another comment here",
 "name": "user2"
}],

//this goes on for about 15 objects more in the array

 "page": 0
}]

이 모든 것을 저장소로 옮기면 실제로 어떻게 해야 하는지 알 수 없게 됩니다.vue-resource와 함께 vuex를 사용해 본 적이 없습니다.

//store.js

state: {
    catalog: []
},
actions: {
    getCatalog({commit}){
        Vue.http.get('https://example.net/api.json').then(response => {
            commit('LOAD_CATALOG', response.data.data)
        });
    }
},
mutations: {
    LOAD_CATALOG (state) {
        state.catalog.push(state.catalog)
    }
},
getters: {
    catalog: state => state.catalog,
}

//component.vue

created () {
    this.$store.dispatch('getCatalog')
},
computed: {
    catalog () {
        return this.$store.getters.catalog
    }
}

이것이 잘못되어 최대 콜스택사이즈 오류가 발생하고 있는 것을 알고 있습니다.위의 예와 같은 결과를 얻으려면 어떻게 해야 합니까?this.catalog = data.body[0].threads;모든 것을 보관했을 때?

설명이 필요한 게 있으면 알려주세요!저는 아직 Vue 2.0을 처음 사용하는 편입니다.

네 주된 문제는 돌연변이에 있어

돌연변이는 상태에 대한 동기적인 업데이트이므로 (비동기 요청을 처리하는) 액션에서 올바르게 호출하고 있지만 상태 내에 배치하기 위한 변환은 전달하지 않습니다.돌연변이는 인수를 받아들이기 때문에LOAD_CATALOG변환은 catalogData를 받아들인다.

mutations: {
    LOAD_CATALOG (state, catalogData) {
        state.catalog = catalogData
    }
},

또한 Vue 2에 vue 리소스를 사용하는 경우 응답 본문을 변환에 전달해야 합니다.

getCatalog({commit}){
    Vue.http.get('https://example.net/api.json').then(response => {
        commit('LOAD_CATALOG', response.body[0].threads)
    });
}

다음 문제점은 이 시스템이 필요없다는 것입니다.gettergetters를 사용하면 파생 상태를 계산할 수 있습니다.기존 상태를 되돌리기 위해서만 getters가 필요한 것은 아닙니다(카탈로그의 경우).getter를 사용할 수 있는 기본적인 예로는 스테이트에 저장되어 있는 카운터에 1을 추가하는 것입니다.

getters: {
    counterAdded: state => state.counter + 1,
}

이러한 변경을 실시하면, 다음과 같이 됩니다.

//store.js

state: {
    catalog: []
},

actions: {
    getCatalog({commit}){
        Vue.http.get('https://example.net/api.json').then(response => {
            commit('LOAD_CATALOG', response.body[0].threads)
        });
    }
},

mutations: {
    LOAD_CATALOG (state, catalogData) {
        state.catalog = catalogData
    }
},

//component.vue

created () {
    this.$store.dispatch('getCatalog')
},

computed: {
    catalog () {
        return this.$store.state.catalog
    }
}

언급URL : https://stackoverflow.com/questions/40681220/using-vue-resource-in-vuex-store-getting-maximum-call-stack-size-error