Vue.js - 等待初始页面渲染 - 然后进行计算

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (164)

在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方法会阻止用户界面(如果显示加载组件,则可以正常),并且组件仅在计算完成后更新。

有没有人知道如何绕过这个?非常感谢!

提问于
用户回答回答于

我的猜测可能就是使用 this.$nextTick().then(...DOM should be re-rendered ... do calculations)

或者以异步等待风格

async function(){
    await this.nextTick()
    // do calculations sync
    // await do calculations async
    // be happy
}

在阻塞之前渲染loadingComponent

参考: Vue.nextTickNuxt示例

用户回答回答于

对于上面你需要使用async / await,因为javascript是异步的,因此行不会一个接一个地执行。也就是说,如果你的函数被调用,引擎不会等待函数完成它的执行但是并行执行下一行。

因此,当您在函数上使用async await时,行将一个接一个地执行。你也可以只使用javascript promises。但是如果你从商店调用一些方法,那么你还需要在那里添加async / await。

你可以实现如下。

async startCalculation() {
      if (store.data) {      
        // long running calculation, then
        await calculationFunction.then(() => {
          this.loading = false
          this.dataAvailable = true
        });
      }
    }

扫码关注云+社区

领取腾讯云代金券