Question

我正在尝试重构Aurelia应用程序以使用Aurelia Store插件，而不是将单例类注入到我的所有viewmodel类中。在我当前的应用程序中，有一堆服务类可以进行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

那是一个非常好的方法。通常，只要该功能仅由单个组件使用，您就应该首选本地状态而不是全局（插件）状态。因此，如果您说一个元素是唯一负责呈现加载程序图像的组件，那么这无疑是一种通过属性isLoading将其仅保留在该组件本地的好方法。

现在，正如您提到的那样，可能是需要从应用程序的各个位置访问该状态的时候了，那就是要将其提升为全局状态的时候。或者，这就是将加载程序封装在自定义元素中的好处，让使用者有条件地显示加载程序元素。最重要的是，将加载状态和加载机制存储在通过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％的内容。使用store插件并不一定意味着您必须全力以赴地进行全局状态管理，但是可以并且应该在合适的地方结合使用经典服务。上面的方法不仅封装了加载指示符，而且还帮助您将数据访问重构到一个位置。如果服务本身需要侦听状态更改，您甚至可以在其中创建订阅并执行所需的操作。

Answer 2

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

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

那真的很糟吗？似乎太容易了。我想这仅适用于当前的viewmodel。如果我还有其他组件需要知道是否正在加载，那么拥有任何组件都可以订阅的state属性就很有意义。

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

2 个答案: