VuexストアでVueリソースを使用する。最大呼び出しスタックサイズのエラーを取得する

Question

私はvuexを使用してコンポーネントに私の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 
}] 

私はこのすべてを移動すると、APIが、私はそれがこのように設定していた、それは大丈夫だったコンポーネントから直接アクセスされていると私は実際にこの作業を行う方法について把握していません。私は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を使用することでかなり新しいです。

Answer 1

あなたの主な問題は突然変異です。

突然変異は状態に対する同期的な更新です。したがって、あなたは正しく（あなたの非同期要求を処理する）アクションからそれを呼び出していますが、突然何かを渡して状態に置くことはありません。あなたのLOAD_CATALOG突然変異はあなたがVueの2のためにVUEのリソースを使用している場合、あなたは

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 
    } 
}, 

また、catalogDataを受け入れるよう変異は、引数を受け入れます

次の問題はgetterを必要としないため、ゲッターは派生状態を計算することができます。既存の状態（ケースカタログ内）を返すだけで済みます。

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

：あなたはゲッターを使用することができますどこの基本的な例では、物事はもう少し下のようになります。これらの変更を行ったら、状態に保存されたカウンターにすなわち

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

を1を追加することです