vue.js - 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
}]

これをすべてストアに移動すると、実際にこれを機能させる方法がわかりません。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 を使い始めたばかりです。