mixins/RemoteData.js:
export default function (resources) {
return {
data() {
let initData = {
removeDataLoading: 0,
remoteErrors: {},
}
// 下面这个for循环很重要,如果不初始化数据,就不会被Vue添加响应式属性,因此组件不会在属性更改时更新
for(const key in resources) {
initData[key] = null
initData.remoteErrors[key] = null
}
return initData
},
created () {
// 在钩子函数中操作DOM建议加上this.$nextTick
this.$nextTick (function () {
for (const key in resources) {
let url = resources[key]
this.fetchResource(key, url)
}
})
},
methods: {
async fetchResource (key, url) {
this.$data.removeDataLoading++
this.$data.remoteErrors[key] = null
try {
this.$data[key] = await this.$fetch(url)
} catch (e) {
// console.error(e)
this.$data.remoteErrors[key] = e
}
this.$data.removeDataLoading--
}
},
computed: {
remoteDataBusy () {
return this.$data.removeDataLoading !== 0
},
hasRemoteErrors () {
return Object.keys(this.$data.remoteErrors).some(
key => this.$data.remoteErrors[key]
)
},
}
}
}