本文将介绍一款前端类的 npm 包 vuex-loadings 的使用方法。通过这个工具，你可以更加便捷的控制异步请求的 loading 状态，提高开发效率。
vuex-loadings 简介
vuex-loadings 是一个基于 Vuex 的状态管理工具，用于改变异步请求时的 loading 状态。使用 vuex-loadings，你可以轻松管理一些异步数据的 loading 状态，更好地掌控你的应用。vuex-loadings 的特点如下：
- 简单易用：内置了一些常用的方法，使用起来极其方便。
- 支持多种状态：支持数据加载中、数据加载成功、数据加载失败等多种状态。
- 不依赖 UI 库：vuex-loadings 只是一个纯粹的状态管理工具，不会和任何 UI 库产生耦合性。
vuex-loadings 安装
vuex-loadings 可以通过 npm 安装。在终端中，输入以下命令即可：
npm install vuex-loadings --save
vuex-loadings 使用方法
1. 在 Vuex 中引入 vuex-loadings
首先，在 Vuex 的 store 中引入 vuex-loadings 并注册：
-- -------------------- ---- ------- ------ --- ---- ------ ------ ---- ---- ------- ------ ------------ ---- ---------------- -------------- ----- ----- - --- ------------ -------- ----------------- -- --- ---
2. 设置异步请求的 loading 状态
在 action 中，使用 setLoading 方法设置异步请求的 loading 状态：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
----- ------- - -
----- ----------- ------ -- -
-- ------- ------- --- ----
----------------------- ------
----- -------- - ----- -------------------
----- ---- - ----- ----------------
------------------------- ------
-- ------- ------- --- -----
----------------------- -------
-
-3. 在组件中使用 loading 状态
在组件中，通过 mapGetters 引入 loading 状态，如下：
-- -------------------- ---- -------
------ - ---------- - ---- -------
------ ------- -
--------- -
-----------------------------
--------------- -
------ ---------------------------- -- ----- ------- --
-
-
-4. 在模板中使用 loading 状态
在模板中，绑定 isLoadingData 对应的样式，并显示 loading 状态，如下：
<div v-if="isLoadingData" class="loading"> <span class="loading-icon"></span> 正在加载... </div>
以上就是使用 vuex-loadings 的全部流程。通过这样的方式，你可以轻松地设置异步请求的 loading 状态，在组件中控制 loading 状态，提高开发效率。
总结
vuex-loadings 是一个极其好用的前端状态管理工具，通过本文的介绍，你应该已经对它的用法有了一个初步的了解。如果你正在处理异步请求的 loading 状态，那么请不要犹豫，使用 vuex-loadings 会让你事半功倍。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672693660cf7123b366fe