Aurelia大街店 - UI指标，状态正在改变

Question

我试图重构一个奥里利亚应用使用Aurelia路上商店的插件，而不是将其注入到我的所有视图模型类一个单独的类。在我目前的应用程序有一堆服务类，这使得AJAX调用来从网页API数据。使用承诺链接进行调用很容易暂停UI，同时在东西时加载，例如

this.isLoading = true;
this.api.getStuff()
  .then(s => this.myproperty = s.stuff)
  .catch(a => console.error("hgssgg"))
  .finally(() => this.isLoading = false);

现在，我已经感动我的API调用到我店里的动作，我怎么能代表这个加载在我的UI？

道歉的基本问题。任何帮助深表感谢。

Answer 1

这是一个完全正常的做法。一般来说，你应该在全局（插件）状态，只要该功能只能使用单一成分更喜欢本地状态。所以，如果你有可以说，这是负责渲染加载图像的唯一部件的元素，它肯定是要保持它只有本地通过属性isLoading该组件的好方法。

现在，当你提到有可能出现，你需要从你的应用程序的各个地方访问状态的时候，这就是当你想将它推广到全局状态。或者，这是封装在一个自定义元素装载机的利益，让消费者有条件地显示loader元素。在那家商店的负荷状态，并在其中通过DI公开服务加载机构的顶部。

// loading-service.ts
export class LoadingService {
  showLoader: boolean = false;

  public async yourLoadingMechanism() {
    this.showLoader = true;
    await fetchYourDataAsync();
    this.showLoader = false;
  }
}

// consumer-view.ts
export class ConsumerView {
  constructor(loadingService: LoadingService) {}
}

// consumer-view.html
<template>
  <button click.delegate="loadingService.yourLoadingMechanism()>Fetch data</button>
  <status-loader show.bind="loadingService.showLoader"></status-loader>
</template>

我个人觉得没有100％这样或那样的。使用存储插件并不一定意味着你必须全力以赴，在全局状态管理，但在这里你认为合适的可以，也应该结合使用经典的服务。上述做法不仅封装负荷指标，但还可以帮助您重构数据接入到同一个地方。如果服务本身需要听状态的变化，你甚至可以在那里创建订阅，并做所需要的。

Answer 2

我可以派3个行动，以实现我想要什么，但我突然想到，这是很多国家的变化只是告诉我，一个动作需要一些时间。所以，实际上，用户界面负载指示器只是，告诉我，一个异步的动作正在进行中。所以，不如说我isLoading财产存放在状态，我只是保持这个作为我的视图模型的属性和调度的行动时改变它。所以，在我的ViewModel它是这样的。

this.isLoading = true;
await this.store.dispatch(getStuff);
this.isLoading = false;

是那么糟糕吗？似乎太容易了。我想这将仅适用于当前视图模型工作。如果我有需要知道，如果加载正在发生的其他组件，然后它将使意义有哪些任何组件可以订阅的状态属性。