在 Vue 项目中，我们常常需要在异步请求或者路由切换等场景下展示 loading 动画，以提升用户体验。如果每个组件都需要单独实现 loading 功能，那么代码会变得冗余而难以维护。这时候，我们可以使用 mixin 在全局范围内实现 loading 功能，避免重复代码，提高代码的可维护性。
mixin 是什么？
mixin 是 Vue 中实现代码复用的一种方式，它允许我们将一些公共的逻辑封装成一个 mixin 对象，然后在需要使用这些逻辑的组件中进行混入。通过 mixin，我们可以将相同的代码逻辑应用到多个组件中，避免了重复编写代码的问题。
实现全局 loading 功能的 mixin
下面我们来看一下如何使用 mixin 实现全局 loading 功能。
首先，我们需要定义一个名为 loadingMixin 的 mixin 对象，代码如下：
-- -------------------- ---- -------
----- ------------ - -
------ -
------ -
---------- ------ -- ---- -------
--
--
-------- -
------------- -
-------------- - -----
--
------------- -
-------------- - ------
--
--
--在 data 中，我们定义了一个名为 isLoading 的变量，用于控制 loading 的展示和隐藏。在 methods 中，我们定义了两个方法：showLoading 和 hideLoading，用于显示和隐藏 loading。
接下来，我们需要在全局中引入这个 mixin，代码如下：
import Vue from 'vue'; import loadingMixin from './loadingMixin'; Vue.mixin(loadingMixin);
通过 Vue.mixin 方法，我们将 loadingMixin 混入到 Vue 实例中，这样所有的组件都可以使用 showLoading 和 hideLoading 方法来控制 loading 的展示和隐藏了。
最后，我们需要在 App.vue 中添加 loading 的展示和隐藏逻辑，代码如下：
-- -------------------- ---- -------
----------
-----
-------- ---------------------------
---------------------------
------
-----------
--------
------ ------- -
------ -
------ -
---------- ------
--
--
--------- -
----------------------- ------------------
----------------------- ------------------
--
-------- -
------------- -
-------------- - -----
--
------------- -
-------------- - ------
--
--
--
---------在 App.vue 中，我们定义了一个名为 isLoading 的变量，用于控制 loading 的展示和隐藏。在 created 生命周期中，我们通过 $on 方法监听 showLoading 和 hideLoading 事件，当组件中调用 showLoading 和 hideLoading 方法时，会触发这两个事件。在事件回调函数中，我们可以通过改变 isLoading 变量的值来控制 loading 的展示和隐藏。
最后，在组件中使用 loading 功能时，只需要在需要展示 loading 的地方调用 this.$emit('showLoading') 方法，隐藏 loading 时调用 this.$emit('hideLoading') 方法即可。
总结
通过使用 mixin，在全局范围内实现 loading 功能，可以避免重复编写代码的问题，提高代码的可维护性。在本文中，我们介绍了如何通过 mixin 实现全局 loading 功能，并提供了示例代码。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6555c9bbd2f5e1655d02ecbd