javascript - 只有在父组件的异步方法完成后才渲染子组件

Question

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

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

Answer 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;
}

---

编辑:根据您在下方的评论。对于 Vuex，改为这样做:

• 继续使用v-if

• 使用计算属性而不是数据属性:

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

使用 mapState 的替代语法

import { mapState } from 'vuex';

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