在 Vuex 商店中使用 Vue-Resource；获取最大调用堆栈大小错误

Question

我正在尝试使用 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-resource。

//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 还是很陌生。

Answer 1

你的主要问题是你的突变。

突变是对状态的同步更新，因此您正确地从操作（处理异步请求的地方）调用它，但您没有将突变传递给状态中的任何内容。突变接受参数，因此您的 LOAD_CATALOG 突变将接受目录数据，即

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 允许我们计算派生状态，您不需要它们只是为了 return 现有状态（在您的案例目录中）。一个可以使用 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
    }
}

在 Vuex 商店中使用 Vue-Resource；获取最大调用堆栈大小错误

Using Vue-Resource in Vuex store; getting maximum call stack size error

vue.js

vue-resource

vuex

vuejs2