在 fetch 和 mount 完成后做一些事情

Posted 2023-02-23

【中文标题】在 fetch 和 mount 完成后做一些事情

【英文标题】：Do something after fetch and mounted complete

【发布时间】：2021-06-07 09:28:11

【问题描述】：

我有一个简单的 nuxt.js 组件，如下所示。

Chart 是一个组件，它有一个方法可以接收在fetch() 中获取的数据。

如果我只是在await fetch('...') 之后调用该方法，由于尚未安装Chart 组件，因此在客户端呈现它时会出现错误。在 fetch 和 mount 之后我怎么能去做呢？

我无法在mounted() 中执行此操作，因为我无法确定提取是否完成。

<template>
    <div>
        <!--Custom component-->
        <Chart ref="chart"/> 
    </div>
</template>

<script>
    export default 
        data()
            return 
                chartData: []
            
        ,
        async fetch() 
            this.chartData = await fetch('https://api.mocki.io/v1/b1e7c87c').then(res =>
                res.json()
            )
            this.$refs.chart.insertSeries(this.chartData) // doesn't work because Chart is not mounted yet.
        ,
    
</script>

【问题讨论】：

您使用的是哪个图表提供程序？ Chart 是第三方组件吗？

是的，我正在使用 HighCharts。但是 Chart 是我自己围绕它制作的包装器。所以这更像是一个关于如何调用任何方法的一般性问题。

【参考方案1】：

处理这种情况的首选方法是使用道具，以便<Chart> 可以自己处理数据，并在孩子中观察道具。

父母

<Chart :chart-data="chartData" /> 

图表

export default 
  props: ['chartData'],
  watch: 
    chartData(newValue) 
      if(newValue.length) 
        this.insertSeries(newValue);
      
    
  ,
  ...

---

变体：您可以使用v-if 代替watch：

父母

<Chart v-if="chartData.length" :chart-data="chartData" /> 

图表

export default 
  props: ['chartData'],
  created() 
    this.insertSeries(this.chartData);  // `chartData` is guaranteed to exist
  
  ...

---

注意：这两个选项之间可能存在细微差别。假设您在加载图表数据时想要一个加载动画。

使用第一个选项，由于组件会立即显示，因此必须将加载功能放在子组件中。在第二个选项中，它将被放在父级中（在 v-else 中）。