时间戳

首页 > 解决方案 > Vuetify 2 骨架加载器，在 Vuex 商店中操作“加载”

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

问题描述

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

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

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

就其本身而言，这很好。

当我现在包装data-tablewithv-skeleton-loader并放置道具时: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;
  },
}

标签： javascriptvue.jsvuejs2vuexvuetify.js

解决方案

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

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

推荐阅读