asynchronous - Vue/Vuex watcher 动态/异步组件加载

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. 显示一个加载器，在所有内容渲染后消失。我无法弄清楚如何执行后者，因为我无法将此功能放入 mount() 钩子中，因为所有这些都发生在监视的参数更改时（因此每次路由更改时都不会重新安装组件）。

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

标签： asynchronousvuejs2vuex