Vue.js 在Vuex存储中使用Vue资源；获取最大调用堆栈大小错误

我正试图使用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
}]

当我把这些都搬到商店时，我对如何真正做到这一点失去了理解。我以前使用过vuex，但从未使用过vue资源

//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)
    });
}

下一个问题是您不需要

getter

，getter允许我们计算派生状态，您不需要它们仅仅返回现有状态（在您的示例目录中）。可以使用getter的一个基本示例是向存储在state中的计数器添加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
    }
}

---

你的主要问题是你的变异

突变是对状态的同步更新，因此您可以从操作（处理异步请求）正确地调用它，但不会将突变传递到状态中。突变接受参数，因此您的

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

下一个问题是您不需要

getter

，getter允许我们计算派生状态，您不需要它们仅仅返回现有状态（在您的示例目录中）。可以使用getter的一个基本示例是向存储在state中的计数器添加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
    }
}