仅在父组件的挂载中完成异步方法后才渲染子组件

【问题标题】：Render a child component only after async method is completed in parent's mounted仅在父组件的挂载中完成异步方法后才渲染子组件
【发布时间】：2020-07-10 17:14:27
【问题描述】：

我有一个渲染子组件的父组件。我正在从父组件的mounted 内部进行异步调用（来自 Vuex 操作的 axios 'get' 请求），它获取子组件所需的数据。

我想阻止子组件的呈现，直到异步调用完成。有人可以提出一些优雅的方法吗？

【问题讨论】：

标签： javascript vue.js async-await vue-component vuex

【解决方案1】：

v-如果

<child v-if="mydata" />

mydata可以是初始化为null的数据属性：

data() {
  return {
    mydata: null
  }
}

在created/mounted 中填充时，child 组件将显示。

async created() {
  const response = await axios // ...
  this.mydata = response.data;
}

编辑：基于您的以下 cmets。对于 Vuex，请改为：

继续使用v-if

使用计算属性而不是数据属性：

computed: {
   mydata() {
     return this.$store.state.mydata;
   }
}

或者你可以使用mapState

import { mapState } from 'vuex';

computed: {
   ...mapState(['mydata'])
}

【讨论】：