原因分析:由于响应式数据有缓存所以在页面中可以进行渲染,但是在setup中不能直接拿到异步获取到的值进行操作。
解决方法:在setup中事先定义一个响应式变量,然后将异步请求获取到的数据赋值给事先定义好的响应式变量。
// 现在setup中定义一个响应式的数据
const data = ref([])
//将异步请求的数据赋值给data
const getOrderList = async () => {
const userinfo = JSON.parse(localStorage.userinfo)
const result = await request.get('/api/v1/orders/' + userinfo.id)
//注意:异步获取的数据虽然可以赋值给data,但是在getOrderList外data.value是空的里边并没有赋值之后的数据,
//所以对每个订单的总数量和总价的计算需要在异步函数里边进行操作,而不能在外边进行操作
for (const item of result.data) {
let totalcount = 0
let totalprice = 0
for (const itemobj of JSON.parse(item.products)) {
totalcount += itemobj.count
totalprice += itemobj.count * itemobj.price
}
item.totalcount = totalcount
item.totalprice = totalprice.toFixed(2)
}
//此时虽然赋值之后也不能在getOrderList外进行操作,但是由于响应式数据有缓存,所以可以在渲染层进行渲染
//因此,此处的赋值只是为了让渲染层能够拿到数据进行渲染
data.value = result.data
}