在开发前端应用时，我们可能会遇到等待异步请求完成但是 UI 还未更新的情况，此时用户会觉得应用卡住了，难以判断进度。为了解决这个问题，我们需要在应用中实现全局的 loading 状态管理。
对于 Vue.js 应用，可以使用 Vuex 来管理全局状态。Vuex 是一个专为 Vue.js 应用开发的状态管理库，它提供了集中式存储管理应用的所有组件的状态，其中包括全局状态。
接下来，我们将介绍在 Vue.js 应用中如何通过 Vuex 来实现全局 loading 状态管理。
步骤
步骤一：安装 Vuex
在开始使用 Vuex 前，需要先安装它。可以在命令行中执行以下命令：
npm install vuex --save
步骤二：创建 store
在使用 Vuex 时，需要先创建一个 store 对象。在 store 对象中，我们可以定义和管理全局状态。
-- -------------------- ---- -------
-- --------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - -
-------- -----
-
----- --------- - -
----------- ------- -
------------- - ----
--
----------- ------- -
------------- - -----
-
-
----- ------- - -
----------- -- ------ -- -
---------------------
--
----------- -- ------ -- -
---------------------
-
-
------ ------- --- ------------
------
----------
-------
--在上述代码中，首先引入了 Vue 和 Vuex，并且使用 Vue 来安装 Vuex。然后，定义了一个状态对象 state，其中包括一个布尔型的 loading 状态。接着，定义了两个 mutation，分别用来显示和隐藏 loading 状态。最后，定义了两个 action，分别用于触发显示和隐藏 loading 状态的 mutation。
步骤三：在组件中使用 store
在组件中使用 Vuex 的步骤可以分为三个：
- 从 store 对象中获取全局状态
- 在组件中使用获取到的状态
- 在组件中触发 action
步骤三.1：从 store 对象中获取全局状态
在组件中使用 Vuex 前，需要从 store 对象中获取需要的状态。可以使用 Vuex 提供的辅助函数 mapState 来简化这个过程。
-- -------------------- ---- -------
-- --------------
----------
---- --------------
------ --- -------
---- -------------------------------
------
-----------
--------
------ - -------- - ---- ------
------ ------- -
----- -------------
--------- -
-------------------------
--- -- -
------ -------- -- ---- ------ ----
-
-
-
---------在上述代码中，使用 mapState 辅助函数将全局状态 loading 映射到当前组件的计算属性中。
步骤三.2：在组件中使用获取到的状态
在组件中，可以通过计算属性、方法等方式来使用获取到的状态。在上述代码中，我们使用 v-if 指令来判断并显示 loading 状态。
步骤三.3：在组件中触发 action
在组件中触发 action 也可以使用辅助函数 mapActions 来简化这个过程。
-- -------------------- ---- -------
-- --------------
----------
---- --------------
------ --- -------
---- -------------------------------
------- ------------------------ -------------
------
-----------
--------
------ - --------- ---------- - ---- ------
------ ------- -
----- -------------
--------- -
-------------------------
--- -- -
------ -------- -- ---- ------ ----
-
--
-------- -
----------------------------- ----------------
--------- -- -
------------------
-- ------
------------- -- -
------------------
-- -----
-
-
-
---------在上述代码中，使用 mapActions 辅助函数将需要用到的 action 映射到当前组件的方法中。同时，调用 showLoading 方法来显示 loading 状态，在异步请求完成后调用 hideLoading 方法来隐藏 loading 状态。
示例代码
完整的示例代码可以在以下链接中找到：
https://github.com/Honsti/vue-loading-example
总结
在 Vue.js 应用中，通过使用 Vuex，我们可以很方便地实现全局加载状态管理。
具体实现步骤如下：
- 安装 Vuex
- 创建 store
- 在组件中使用 store
希望本篇文章能够对您在 Vue.js 应用中使用 Vuex 实现全局 loading 状态管理有所启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484206648841e989434af9f