Блог

Я пытаюсь создать повторно используемый компонент 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>
  

Если корзина хранится в хранилище vuex, вы получаете к ней доступ, позвонив

 this.$store.state.carts
  

Используйте computed section для получения данных из вашего хранилища:

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

прямо сейчас обновите свой шаблон:

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