Question

我有一个基本组件，其中有一个带有v-for的动态组件，该组件基于计算的属性显示。

到目前为止，我实际上一直在尝试做的一切，这是一种错误的方法，就是将加载数据的方法包装在settimeout中。这个问题既是方法论问题，又是编码问题。

我的基本组件如下：

<template>
  <div>
    <v-progress-linear
      v-model="progressValue"
      v-if="loading"
    ></v-progress-linear>
    <component
      v-for="table in tables"
      :key="table.id"
      :is="table.structure"
      :table="table"
    ></component>
  </div>
</template>

<script>
  import Annual from './DataTables/Annual';
  import { mapState, mapGetters } from 'vuex';
  export default {
    name: "Page",
    props: [],
    components: {
      Annual,
    },
    data: () => ({
      progressValue: 0,
      loading: false,
      tables: [],
    }),
    computed: {
      ...mapGetters({
        currentTables: 'getCurrentPageTables',
        tableTitles: 'getCurrentPageTableTitles',
      }),
      ...mapState({
        pageName: state => state.pageName,
        snakeName: state => state.snakeName,
      }),
    methods: {
      updateTables(payload) {
        this.loading = true;
        payload.forEach(title => {
            this.tables.push(this.currentTables.filter(e => title === e.name)[0]);
            this.progressValue = this.tables.length / payload.length;
          })
      },
    },
    watch: {
      snakeName: {
        handler() {
          this.progressValue = 0;
          this.updateTables(this.tableTitles);
          this.$nextTick(() => {this.loading = false;})
        },
        immediate: true,
      },
    }
  }
</script>

Annual.vue只是显示Vuetify v-data-table元素的组件，其结构与此无关紧要。

出于所有意图和目的，我们可以将currentTables和tableTitles都视为数组，第一个对象的数据填充Annual.vue中的v-data-tables，第二个字符串仅是表的名称

当用户导航到另一个页面时，getter会根据用户导航到的页面返回不同的数据，但是某些页面有20多个表，这会导致导航到这些页面时页面加载变慢。我正在尝试执行以下两项操作之一： 1.一次异步加载一个组件，同时仍使页面能够供用户浏览。 2.显示一个加载器，该加载器在呈现所有内容后消失。我很难弄清楚该怎么做，因为我无法将此功能放到Mounted（）挂钩中，因为所有这一切都发生在监视的参数更改时（因此，每次更改路线时都不会重新安装该组件））。

任何有关如何解决此问题的建议将不胜感激。

Vue / Vuex监视程序动态/异步组件加载

0 个答案: