Aurelia 商店 - UI 状态正在改变的指标

Question

我正在尝试重构 Aurelia 应用程序以使用 Aurelia Store 插件而不是注入到我所有视图模型 class 中的单例 class。在我当前的应用程序中，有一堆服务 class 可以调用 ajax 从 Web 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

我可以分派 3 个动作来实现我想要的，但让我吃惊的是，这是一个很大的状态变化，只是为了告诉我一个动作需要一些时间。所以，实际上，ui 加载指示器就是，告诉我正在进行异步操作。因此，与其将我的 isLoading 属性存储在状态中，我只是将其保留为我的视图模型的属性并在调度操作时更改它。所以，在我的 viewModel 中它是这样的。

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

有那么糟糕吗？似乎太容易了。我想这只适用于当前的视图模型。如果我有其他组件需要知道是否正在加载，那么拥有一个任何组件都可以订阅的状态属性是有意义的。

Answer 2

这是一个非常好的方法。一般来说，只要该功能仅由单个组件使用，您应该更喜欢本地状态而不是全局（插件）状态。因此，如果您假设一个元素是唯一负责渲染加载器图像的组件，那么通过属性 isLoading.[=12= 将其仅保留在该组件的本地当然是一种好方法]

现在正如您提到的那样，您可能需要从应用中的不同位置访问该状态，这就是您想要将其提升为全局状态的时候。或者，这就是将 loader 封装在自定义元素中的好处，让消费者有条件地显示 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%这样那样。使用商店插件并不一定意味着您必须全力以赴进行全局状态管理，而是可以而且应该在您认为合适的地方结合使用经典服务。上述方法不仅封装了加载指示器，还可以帮助您将数据访问重构到一个地方。如果服务本身需要监听状态变化，您甚至可以在那里创建订阅并执行所需的操作。

Aurelia 商店 - UI 状态正在改变的指标

Aurelia store - UI indicator that state is changing

aurelia

aurelia-store