這是異步取值函式
limitAPI(searchData,page){ // 異步資料獲取
return new Promise((resolve,reject) => {
let results = {},pagination = {};
this.$api.getMicroLimits(searchData).then(res => {
results = res.items.map(d => {
return {
key: d.code,
code: d.code,
microService: d.microServiceName,
description: d.description,
status: d.active,
loading: false,
}
});
pagination = this.$store.state.pagination(page, res.itemSize);
resolve({ // 此處回傳異步物件
results:results,
pagination:pagination
});
}).catch(err => {
this.$message.error(err);
reject(null);
})
});
}
呼叫取值函式API，賦值給一個物件
……
this.limitAPI(data,page).then(res => {
console.log(res.data); // 此處列印的資料正確，獲取了最新資料
this.currMicro = {
// resolve賦值寫入物件里
data : res.results,
pagination : res.pagination,
...this.mslimitSearchObj.record,
loading:false
};
console.log(this.currMicro.data)； // 此處資料沒有更新
}).catch(err => {
});
……
當把resolve賦值寫入物件時可以發現，第一次加載資料時，該物件被成功賦值，currMicro 的data 拿到了完整的資料；
但是當再次呼叫該取值api時，發現resolve賦值物件res的data列印出來是最新獲取的資料，但是賦值到currMicro物件中后，currMicro物件的data列印出來是之前的資料。
經過分析，我猜測是js編譯程序導致的問題，于是我對賦值代碼做了一下改動，
……
this.limitAPI(data,page).then(res => {
console.log(res.data); // 此處列印的資料正確，獲取了最新資料
this.currMicro = {
...this.mslimitSearchObj.record,
loading:false
};
// 把resolve賦值代碼寫入物件外
this.currMicro.data = res.results;
this.currMicro.pagination = res.pagination;
console.log(this.currMicro.data)； // 此處資料成功更新
}).catch(err => {
});
……
這次再測驗，currMicro物件資料成功更新。
兩次的區別在于js物件屬性初始化的方法不同，但是我沒找到這兩種初始化方法的原理
在此請求博友解答或者討論！
uj5u.com熱心網友回復：
看你這個應該是vue吧，vue的深層資料變化的監聽需要在watch的對應屬性中增加deep：true屬性。
uj5u.com熱心網友回復：
感謝大哥回復！
這里的問題沒有用到watch，我一般直接用解構賦值創建新的物件，保證vue正確監聽到資料變化。
我開始也考慮過是否是資料監聽的問題，但是經過debug發現物件資料在傳遞到子組件之前、賦值時就沒有拿到正確的資料。
在第二段代碼中，直接console就發現currMicro物件資料沒有正確更新
this.currMicro = {
...this.mslimitSearchObj.record,
loading:false,
data : res.data
};
console.log(res.data); // 此處列印的資料正確，獲取了最新資料
console.log(this.currMicro.data)； // 此處資料成功更新
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/106735.html
標籤：JavaScript
上一篇：每日一句前端英陳述句子翻譯