在Nuxt.js项目中,我有一个页面,在这个页面中,我需要先进行一些客户端计算,然后才能在表中显示一些数据。在计算之前和计算过程中,我想显示一个加载屏幕。
一些背景:数据是农民使用的地块。这张表格应该显示过去几年在一块土地上种植的作物。数据在数据库中的存储方式如下:
plots = [{
name: 'Plot1',
year: 2017,
crop: 'Wheat'
...
}, {
name: 'Plot1',
year: 2018,
crop: 'Maize',
...
} ...]
在一个方法中,该数据被转换为以下结构的嵌套对象
data = {
'Plot1': {
2017: {
'crop': 'Wheat',
'catchCrop': true
},
2018: {
'crop': 'Maize',
'catchCrop': false
}
}
...
}
并随后显示在表格组件中。
该组件的模型如下所示:
<template>
<loadingComponent v-if="loading"/>
<tableComponent v-else-if="!loading && dataAvailable"/>
<span v-else >No data</span>
</template>
<script>
data() {
return {
loading: true,
dataAvailable: false
}
},
mounted() {
this.startCalculation()
},
methods: {
startCalculation() {
if (store.data) {
// long running calculation, then
this.dataAvailable = true
}
this.loading = false
}
}
</script>
我面临的问题是加载组件从来没有显示出来。但是,startCalculation
方法会阻塞用户界面(如果显示了加载组件就可以了),并且只有在计算完成后才会更新组件。
有谁知道我怎么才能绕过这一关吗?提前谢谢你!
编辑:在摆弄之后,我可以通过将setTimeout
设置为1ms来让它以我想要的方式工作。这样,加载指示器被显示,数据被正确处理,然后在计算完成后,加载指示器被成功移除。然而,这感觉像是一个非常肮脏的黑客行为,我希望避免它……
mounted() {
this.loading = true
// set short timeout in order for Vue to render the loading bar
setTimeout(() => {
this.startCalculation()
this.loading = false
},1)
}
发布于 2019-03-14 20:46:11
对于上面的代码,您需要使用async/await,因为javascript
是异步的,因此行是的,而不是一个接一个地执行。也就是说,如果您的函数被调用,引擎不会等待函数完成其执行,而是并行执行下一行。
因此,当您在函数上使用async await时,这些行将一个接一个地执行。你也可以使用javascript promises.But,如果你要从存储中调用一些方法,那么你也需要在那里添加异步/等待。
如下所示,您可以实现此目标。
async startCalculation() {
if (store.data) {
// long running calculation, then
await calculationFunction.then(() => {
this.loading = false
this.dataAvailable = true
});
}
}
发布于 2019-03-15 06:27:12
我的猜测是也许可以使用
`this.$nextTick().then(...DOM should be re-rendered ... do calculations)`
或者在阻塞之前以async
await
样式呈现loadingComponent
。
async function(){
await this.$nextTick()
// do calculations sync
// await do calculations async
// be happy
}
编辑
另一种选择就是解锁代码。例如,通过搜索找到的第一个vue-worker库:
mounted(){
this.loading = true;
async ()=>{
this.calculatedData= await this.$worker(doBlockingCalculation, ...args);
this.loading = false;
}
}
https://stackoverflow.com/questions/55160572
复制相似问题