Dieses Mal bringe ich Ihnen die von Vue Processing Storejs erhaltenen Vorsichtsmaßnahmen zum Abrufen von Daten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.
Der spezifische Code lautet wie folgt:
export default {
data(){
return {
shopList:{},
isEmpty:false, //判断购物车中是否有存在内容
}
},
created(){
if(!store.get('?shopCar')){
this.isEmpty = true;
}else{
//对数据处理 将商店中名中的地址分离出来
this.shopList = store.get('shopCar');
console.log(this.shopList)
}
}
}Drucken Sie ihn zu diesem Zeitpunkt aus:
this.shopList Das angezeigte Ergebnis ist {ob: Observer}
Obwohl es wie folgt direkt in Vue verwendet werden kann:
<ul>
<li v-for = "list in shopList" :key = "list.id">
{{list}}
</li>
</ul> Aber wenn ich die Daten in this.shopList zu diesem Zeitpunkt verarbeiten möchte, treten Probleme auf Wenn Sie die Daten in einer Schleife verarbeiten, treten unerwartete Probleme auf, da das beim Drucken angezeigte Ergebnis undefiniert ist. this.shopList.length
Es gibt mehrere Möglichkeiten, Objekte zu durchlaufen :
1, die am häufigsten verwendetefor-Schleife , aber die Länge ist derzeit nicht definiert, diese Methode ist nicht verfügbar
2, da sie aus den gleichen Gründen wie oben nicht verwendet werden kann 3 🎜> verfügt auch über Methoden zum Durchlaufen von ObjektenSie finden eine dritte Methode, die diese Daten durchqueren kann, dann können die Daten verarbeitet werden. $.each(this.shopList,function(n,i){})
created(){
if(!store.get('?shopCar')){
this.isEmpty = true;
}else{
//对数据处理 将商店中名中的地址分离出来
var shopList = store.get('shopCar')
$.each(shopList,function(n,i){
//处理数据。。。。。
})
this.shopList = shopList;
console.log(this.shopList)
}
}So verwenden Sie die dynamische Aktualisierung der Echarts-Komponente in Vue
Detaillierte Erläuterung der Vuex-Nutzungsschritte
Das obige ist der detaillierte Inhalt vonvue verarbeitet von storejs erhaltene Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
