Javascript Vuetify 2骨架加载器，带“操纵”；“装载”；在Vuex商店

我正在使用Vuetify

v-skeleton-loader

组件包装

v-data-table

组件

数据表

组件正在使用服务器端分页和排序

要完成服务器端分页，文档建议查看

数据表的
选项
对象

，并使用更改的选项进行新的API调用。
在我的存储模块中，我在API请求开始之前设置

state.loading=true

，在响应提交到状态之后设置

state.loading=false

。
在

数据表

组件上，我读取了

：加载

道具的状态

就其本身而言，这很好

当我现在用

v-skeleton-loader

包装

数据表

并放置prop

：load=“load”

时，我得到了无限循环的API请求和

骨架加载器的呈现

我的直觉是，在请求得到解决并且设置了
state.loading=false
之后，
skeleton loader
卸载并装载
数据表
，更改正在监视的选项并触发一个新的API请求，该请求将设置
state.loading=true
，并在卸载
数据表时再次装载
骨架加载程序。这种情况持续下去

如果这是正确的，我如何解决该问题

最简单的例子：


...
导出默认值{
数据（）{
返回{
选项：{}，
...
}
},
观察：{
选项：{
handler（）{
此参数为.getDataFromApi（）；
},
深：是的，
},
},
方法：{
getDataFromApi（）{
//从选项生成查询
这是.store.dispatch（“orders/getOrdersCustom”，查询）；
},
计算：{
…映射器（“订单”、[“订单]），
…映射器（“订单”、[“加载”]），
},
安装的（）{
此.$store.dispatch（“订单/getOrders”）；
}
}

和存储模块：

const namespaced=true；
常量状态={
订单：[]，
加载：false，
};
常量getters={
加载：（状态）=>state.loading，
订单：（state）=>state.orders.items，
};
常量动作={
getOrdersCustom（{commit}，查询）{
提交（“获取订单请求”）；
return orderService.getOrdersCustom（查询）。然后(
（数据）=>提交（“获取订单成功”，数据），
（错误）=>提交（“获取订单失败”，错误）
);
},
}
常数突变={
获取订单请求（状态）{
state.loading=true；
},
获取订单成功（状态、数据）{
Vue.set（state.orders，“items”，数据[“hydra:member”]）；
state.data=数据；
state.loading=false；
},
}
我认为在这种情况下，我应该在本地组件状态中使用一个单独的变量来跟踪初始加载状态，并基于该状态显示骨架加载程序

加载初始数据集后，我将使用数据表组件的内置加载指示器对数据进行分页/排序。还原到骨架视图没有什么意义，因为您已经为用户呈现了一些内容可供查看。
这是一个很好的解决方法，对于我所遇到的问题，是一个更好、更合理的解决方案这是一个很好的解决方案。