介绍
Vue.js 是一个流行的 JavaScript 前端框架，许多开发者喜欢使用它来构建现代化的 Web 应用程序。Vue.js 提供了许多功能，其中一个非常强大的功能是 vuex。vuex 是一个用于 Vue.js 应用程序的状态管理库，它使得我们可以轻松地管理我们应用程序的状态。这篇文章将介绍如何使用 Vuex 实现全局 loading，以及如何联系 Vuex 的核心概念。
安装
首先，我们需要安装 Vuex。可以通过以下命令来安装：
npm install vuex
创建 store
在 Vue.js 中，我们使用 store 保存应用程序的状态。Vuex 提供了一个 Store 类，我们可以在其中创建一个 store。在我们的例子中，我们将 store 存储在文件 store/index.js 中，代码如下：
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
-------------
----- ----- - --- ------------
------ -
-------- -----
--
---------- -
----------------- ------- -
------------- - ------
-
--
-------- -
------------ ------ -- ------- -
-------------------- -------
-
--
-------- -
---------------- -
------ -------------
-
-
--
------ ------- -----上面代码中，我们创建了一个 store，它有一个 state 对象用于保存当前是否处于 loading 状态。我们还定义了一个 mutation（setLoading）用于更新 loading 状态，以及一个 action（setLoading）用于触发 mutation。最后，我们还定义了一个 getter（isLoading）用于获取当前的 loading 状态。
使用 store
现在，我们已经创建了一个 store，接下来让我们在我们的 Vue.js 组件中使用它。在我们的例子中，我们将通过一个全局的 loading 组件来实现全局 loading。当我们需要显示 loading 时，我们将通过一个 mixin 定义来设置 loading 状态。当加载完成后，我们将再次调用 mixin 来更新 loading 状态。
-- -------------------- ---- -------
------ ----- ---- ---------
----- ------- - -
------ -
------ -
-------- -----
-
--
-------- -
-------------- -
------------ - ----
---------------------------- -----
--
------------- -
------------ - -----
---------------------------- ------
-
-
-
------ ------- -------然后，我们可以在我们的组件中使用 startLoading 和 stopLoading 方法。例如：
-- -------------------- ---- -------
--------
------ ------- ---- ------------------
------ ------- -
------- ----------
--------- -
-------------------
-- ----
------------------
-
-
---------结论
在这篇文章中，我们介绍了如何使用 Vuex 实现全局 loading。我们首先创建了一个 store，并定义了一个 mutation 用于更新全局状态。然后，我们在组件中使用 mixin 定义来设置全局 loading。如此一来，我们可以轻松地管理应用程序的状态。这使得 Vuex 成为一个非常实用的状态管理库，它可以帮助我们更好地组织 Vue.js 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff44e466aa76bc7f38ba3a