加载和渲染状态组件 Vue答案

【问题标题】：Loading and rendered state component Vue加载和渲染状态组件 Vue
【发布时间】：2021-03-07 21:11:30
【问题描述】：

我正在尝试创建一个可重用的PageContainer 组件，该组件仅在加载数据后呈现子组件。我在组件中创建了一个插槽，以便在获取数据后渲染子组件，但似乎插槽中的组件忽略了 v-if。有没有人对如何做到这一点有更好的建议？

我的 vuex 状态的结构是这样的

state: {
   // before fetch set, set loading = true
   // after receiving data, set loading = false and data = result.data
   carts: { loading: false, error: false, data: undefined },
}

PageContainer.vue

<template>
  <div>
    <div v-if="isLoading">
      <v-progress-circular :size="80" :width="7" color="primary" indeterminate></v-progress-circular>
    </div>
    <div v-else-if="isError">
      <div>error</div>
    </div>
    <div v-else>
      <slot></slot>
    </div>
  </div>
</template>

因为carts.data 未定义而出错

View.vue

<template>
  <PageContainer :isLoading="carts.loading" :isError="carts.error">
    <div>{{ carts.data.name }}</div>
  </PageContainer>
</template>

【问题讨论】：

标签： vue.js vue-component vuetify.js vuex

【解决方案1】：

使用computed 部分从您的商店获取数据：

computed: {
        getCarts(){
          return this.$store.state.carts
        }
      }

现在更新您的模板：

<PageContainer :isLoading="getCarts.loading" :isError="getCarts.error">
    <div>{{ getCarts.data.name }}</div>
  </PageContainer>

【讨论】：

【解决方案2】：

如果购物车存储在 vuex 存储中，您可以通过调用来访问它

this.$store.state.carts

【讨论】：