在构建现代 Web 应用程序时，管理应用程序的状态是至关重要的。State services（即状态服务）是一种在 Ember 应用程序中管理状态的强有力的工具。
Ember State Services 是一个开源的 npm 包，旨在提供一个简单的方式来管理状态。本文将介绍如何使用这个强大的 npm 包来统一管理 Ember 应用程序的状态，并帮助您更好地了解该包的深入功能。
安装和基本用法
要使用 ember-state-services，您需要首先将它添加到您的 Ember 应用程序中。您可以使用以下命令：
npm install ember-state-services --save
在您的应用程序中安装好 npm 包之后，就可以开始使用 Ember State Services 了。
使用 Ember State Services 进行状态管理的第一步是在您的 app.js 文件中注册服务。您可以使用以下代码将服务注册到您的应用程序中:
import StateService from 'ember-state-services/services/state';
export default Ember.Application.extend({
// ...
state: StateService.create(),
// ...
});在注册完成后，您可以在任何控制器或组件中使用服务。
例如，如果您要将用户信息存储在状态服务中，则可以在您的控制器中使用以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
------ -----------------------
-------- -
----------- -
----------------------------- ------
--
-------- -
----------------------------- ------
-
-
---在上面的代码中，我们首先在控制器中注入了服务，然后在登录和注销动作中使用 set() 方法将用户信息存储在状态服务中。这将使您的用户信息易于在您应用程序的其它地方使用。
深入理解
除了基本用法外，Ember State Services 还提供了许多额外的功能，以便更好地管理您的应用程序状态。
计算属性
通过使用计算属性，您可以基于状态服务中其他属性的值来计算新属性。例如，如果您在某个固定位置上有一个动态的下拉菜单，则该下拉菜单的打开状态可能取决于菜单的选择状态。在这种情况下，您可以使用计算属性来获取所选菜单项，并在状态服务中保存此状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
------ -----------------------
------------- -------------------------------------------------- ---------- -
----- -------------- - ----------------------------------------- -- -----------------
------ -------------- -- ------------------
---
-------- -
-------------- -
-------------------------------------------- -- ---------------------- --------
----- -------------- - ------------------------------------------ ----
------------------------------ ------
-
-
---在上面的代码中，我们首先使用 Ember.computed() 函数创建了一个计算属性，该属性基于状态服务中的 menuOptions 属性来计算所选菜单项。然后在动作 selectMenu 中更新了 menuOptions 属性的值，并更新相应的状态。
状态转换
除了存储临时状态外，相应的状态的转换也是管理状态的重要部分。
使用 ember-state-services，您可以使用 Transition 类来管理状态的转换。以下示例演示如何在控制器中使用 Transition 类：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
------ -----------------------
-------- -
----------- -
----- ---------- - -----------------------------
------------------------
--
---------- -
----- ---------- - -----------------------------
-----------------------
-
-
---当执行 goToLogin() 方法时，状态服务将自动转换为 login。在这种情况下，您可以在您的应用程序中执行相应的逻辑等操作。
中间件
使用中间件，您可以在值添加到状态服务之前或之后，修改该值。这使您可以在状态更改后执行适当的逻辑，例如在值更改后将用户数据保存到本地存储中。
以下代码演示如何在状态更改后执行特定函数：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
------ -----------------------
----------- ---------------------- ------ -
------------------------- -------
------ ------
----
-------- -
------------- -
----------------------------- ------
-
-
---在上面的代码中，我们使用了 set() 方法将名称添加到状态服务中，并在中间件函数中使用 localStorage 将值保存到本地存储中。然后我们将修改后的值返回以便在状态服务中保存。
这是为您的状态服务添加原始中间件的一个示例。使用该功能，您可以在需要时轻松地编写自己的中间件函数。
总结
Ember State Services 是管理应用程序状态的强大工具，它提供了一种简单的方式来管理状态。在本文中，我们了解了如何添加和使用状态服务，并深入了解了其额外的功能和用法。
请注意，在使用状态服务时，您应掌握如何在应用程序中管理和转换状态。但是，由于 ember-state-services 提供了丰富的文档和示例代码，因此相信您将可以更好地实现状态管理。
祝您成功！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca29