white-glove 是一款前端 npm 包，用于在浏览器端帮助您构建和管理 Web 应用程序的状态。它基于 React Hooks 构建，无需 Redux 或 Mobx，白手套使状态管理变得简单便捷、易于维护。
在本篇文章中，我们将介绍如何使用 white-glove，并演示使用 white-glove 管理 Web 应用程序状态的示例。
安装
安装 white-glove 是非常简单的，只需要在终端中执行以下代码即可：
npm install white-glove
使用 white-glove
要开始使用 white-glove，我们需要引入 Provider 组件和 useStore 钩子。Provider 提供了全局状态，useStore 允许我们访问该全局状态。
首先，在应用程序入口文件中，我们需要包裹我们的组件树：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------
----- ----------- - --------------------------------
----------------
----------
---- --
------------
-----------
--然后，在我们的组件中，我们可以使用 useStore 钩子来访问全局状态：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
-------- --------- -
----- ------- --------- - ----------------- ---
----- ----------- - -- -- -
-------------- - ---
--
------ -
-----
--------------
------- --------------------------- -----------
------
--
-
------ ------- --------这是一个简单的计数器组件，它使用 useStore 钩子来访问全局状态。在这个例子中，我们使用 'count' 作为关键字来访问计数器状态，并在点击按钮时将计数器增加 1。
现在，当我们点击按钮时，计数器将从 0 开始增加。这是因为我们在应用程序入口文件中初始化了计数器状态：
import { createStore } from 'white-glove';
createStore('count', 0);在这个例子中，我们使用 createStore 函数来创建一个名为 'count' 的全局状态，并将初始值设置为 0。
示例
下面是一个例子，演示如何使用 white-glove 构建简单的引导页面。这个页面包含一个登录表单，用户输入用户名和密码后，将在全局状态中保存用户的身份验证信息。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
-------- ----------- -
----- ---------- ------------ - -------------------- ----
----- ---------- ------------ - -------------------- ----
----- ------------ - --- -- -
-------------------
----------------------- -------- ----------- --- -------- --------------
--
------ -
----- ------------------------
-------
---------
------ ----------- ---------------- ------------- -- ---------------------------- --
--------
-------
---------
------ --------------- ---------------- ------------- -- ---------------------------- --
--------
------- ----------------------------
-------
--
-
------ ------- ----------在这个例子中，我们使用 useStore 钩子来访问全局状态。我们使用 'username' 和 'password' 作为关键字来访问这两个状态。当用户填写表单并提交时，我们将打印用户名和密码。
在应用程序的入口文件中，我们可以使用 createStore 函数来初始化这两个状态：
import { createStore } from 'white-glove';
createStore('username', '');
createStore('password', '');现在，我们可以在全局状态中保存用户的身份验证信息，并且在任何组件中都可以访问它。
总结
white-glove 是一个简单而强大的 npm 包，它使状态管理变得容易而愉快。在本文中，我们介绍了如何使用 white-glove，以及如何在 Web 应用程序中使用它来管理全局状态。
如果你想了解更多关于 white-glove 的信息，可以访问它的 GitHub 存储库：https://github.com/danielstern/white-glove。
现在，你可以开始在你的项目中使用 white-glove，以更轻松地管理状态，提高生产力！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671088dd3466f61ffdedf