RecordModel.ts //数据模块
import axios from 'axios'
type recordModel = {
RecordList: RecordItem[]
getRecord: () => {}
}
const RecordModel:recordModel = {
RecordList:[],
async getRecord(){
await axios.get('http://xxxx').then((response)=>{
this.RecordList = response.data.vuedata
})
}
}
async function getRecordModel(){
await RecordModel.getRecord()
return RecordModel
}
export {getRecordModel}
showRecord.vue //视图
<template>
<div>{{recordList}}</div>
</template>
<script lang="ts">
export default class ShowRecord extends Vue {
//计算属性 ts 写法
get recordList(){
const hash:{[key:string]:RecordItem[]} = {}
getRecordModel().then((result:any)=>{
result.RecordList.forEach((record:RecordItem[])=>{
const key = record.date
if(!(key in hash)){
this.$set(hash,key,[])
}
hash[key].push(record)
})
})
console.log(hash) //空对象
setTimeout(()=>{
console.log(hash) //有数据 但是视图没有更新
},1000)
return hash
}
}
</script>
###不明白你这个为什么要用计算属性呢,计算属性的话应该会时常读取这个属性,那就会多次执行这个异步函数。读取的时候由于hash是异步获取的,所以hash返回的还是初始值{}
###为什么要在计算属性里边写异步?Promise的.then
会在最后执行,会先 return
出来空集合。
可以看下 Promise
的执行顺序
在Vue
官方文档中提到, 由于 JavaScript
的限制, 当你利用索引直接设置一个项,或者直接改变数组的长度时,Vue
将不会检测到数据的变化。watcher没有监测到,从而不能引发视图的重新渲染。