Vuetify 2 骨架加载器，在 Vuex 商店中操纵“加载”

Question

我正在使用包装 v-data-table 组件的 Vuetify v-skeleton-loader 组件。

data-table 组件正在使用服务器端分页和排序。

为了完成服务器端分页，文档建议观察data-table 的options 对象并使用更改的选项进行新的API 调用。
在我的商店模块中，我在 API 请求开始之前设置了state.loading = true，并在响应提交到状态之后设置了state.loading = false。
在 data-table 组件上，我读取了 :loading 属性的状态。

这本身就可以正常工作。

当我现在用v-skeleton-loader 包装data-table 并放置道具:loading="loading" 时，我得到了一个无限循环的API 请求和skeleton-loader 的渲染。

我的直觉是，在请求得到解决并设置 state.loading = false 后，skeleton-loader 卸载和 data-table 挂载，更改正在监视的选项并触发新的 API 请求，该请求设置 state.loading = true 和skeleton-loader 正在重新安装，而 data-table 已卸载。这会无限地持续下去。

如果正确，我该如何解决这个问题？

小例子：

<template>
  <div>
    <v-card>
      <v-skeleton-loader
        :loading="loading"
        transition="scale-transition"
        height="500"
        type="table"
      >
        <v-data-table
          :headers="headers"
          :items="orders"
          :fixed-header="true"
          :server-items-length="totalItems"
          :options.sync="options"
        >
        </v-data-table>
      </v-skeleton-loader>
    </v-card>
  </div>
</template>

<script>
...
export default {
data() {
  return {
    options: {},
    ...
  }
},
  watch: {
    options: {
      handler() {
        this.getDataFromApi();
      },
      deep: true,
    },
  },
  methods: {
    getDataFromApi() {
      // build query from options
      this.$store.dispatch("orders/getOrdersCustom", query);
    },
  computed: {
    ...mapGetters("orders", ["orders"]),
    ...mapGetters("orders", ["loading"]),
  },
  mounted() {
    this.$store.dispatch("orders/getOrders");
  }
}
</script>

还有商店模块：

const namespaced = true;

const state = {
  orders: [],
  loading: false,
};

const getters = {
  loading: (state) => state.loading,
  orders: (state) => state.orders.items,
};
const actions = {
  getOrdersCustom({ commit }, query) {
    commit("GET_ORDERS_REQUEST");

    return orderService.getOrdersCustom(query).then(
      (data) => commit("GET_ORDERS_SUCCESS", data),
      (error) => commit("GET_ORDERS_FAILURE", error)
    );
  },
}
const mutations = {
  GET_ORDERS_REQUEST(state) {
    state.loading = true;
  },
  GET_ORDERS_SUCCESS(state, data) {
    Vue.set(state.orders, "items", data["hydra:member"]);
    state.data = data;
    state.loading = false;
  },
}

Answer 1

我认为在这种情况下我会做的是在本地组件状态中使用一个单独的变量来跟踪初始加载状态，并根据该状态显示骨架加载器。

加载初始数据集后，我将使用数据表组件的内置加载指示器对数据进行分页/排序。恢复到骨架视图没有多大意义，因为您已经为用户查看。