什么是 @glimmer/tracking
@glimmer/tracking 是一个用于组件状态管理的 JavaScript 库。它是 Glimmer.js 生态系统的一部分，但可以单独使用。
此库的目的是为了使应用程序更容易跟踪其状态，从而使其更易于测试和调试。
如何使用 @glimmer/tracking
安装
使用 npm 包管理器安装：
npm install --save @glimmer/tracking
基本用法
让我们使用一个简单的示例来说明如何使用 @glimmer/tracking。
假设我们正在构建一个应用程序，该应用程序有一个购物车组件，其中包含一组项目。当我们向购物车中添加或删除项目时，我们希望更新视图以反映新的状态。
由于我们想要跟踪我们的购物车状态，我们可以使用 @glimmer/tracking。我们将在组件中定义一个类来管理购物车状态：
-- -------------------- ---- -------
------ - ------- - ---- --------------------
------ ------- ----- ------------ -
-------- ----- - ---
------------- -
----------------------
-
---------------- -
----- ----- - -------------------------
-- ------ --- --- -
------------------------ ---
-
-
-在此示例中，我们使用 @tracked 装饰器标记了这个类的 items 属性。这意味着每当 items 属性的值更改时，都会自动重新渲染视图。
我们还定义了两个方法来添加和删除购物车中的项目。
接下来，我们可以在组件类中使用 ShoppingCart：
-- -------------------- ---- -------
------ --------- ---- ---------------------
------ - ------ -- ------- - ---- -----------------
------ ------------ ---- -------------------------
------ ------- ----- --------------------- ------- --------- -
-------- ------
---- - --- ---------------
--- ------- -
------ ----------------
-
------------------------- -
---------------------------
-
------------------------------ -
------------------------------
-
-在此示例中，我们使用 import { inject as service } from '@ember/service'; 引入了 Ember 服务，并在组件中定义了一个 @service 装饰器，用于将 Ember 数据存储服务注入到组件中。
我们还定义了一个 cart 属性，并将其设置为新的 ShoppingCart 实例。我们还定义了 items 计算属性，该属性返回购物车中的所有项目。
最后，我们定义了两个方法，用于将产品添加到购物车或从购物车中删除产品。
接下来，我们可以在组件的模板中使用这些方法和计算属性来显示购物车中的项目列表：
-- -------------------- ---- -------
------------ ---------
----- --------------
----
------- ----- -- -----------
-------------------- - ----------------- - ------- ---- ------- --- -------------------------- -------------------------------
---------
-----
--------
------- ---- -- ----------
-------
------- ---- ------- --- --------------------- ----------------------- --------- ----- ---------- ---------- ------------------ ---- --------- -- -------------在此示例中，我们使用 {{#if}} 和 {{#each}} 块来显示购物车中的项目。我们还为 "Add Hand Sanitizer to Cart" 按钮绑定了一个事件，该事件将代表 "Hand sanitizer" 产品的新记录插入数据存储服务中，并将该记录添加到购物车中。
现在，当我们添加或删除购物车中的项目时，视图将自动更新以反映最新的状态。
总结
在这篇文章中，我们了解了 @glimmer/tracking 的基本用法，并给出了一个示例，用于演示如何在组件中使用它来管理状态。这将使我们更容易地跟踪我们的应用程序状态，并让它更容易测试和调试。
希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa3bb5cbfe1ea06103d3