Vue 中使用 mixin 实现全局 loading 功能的方法

在 Vue 项目中，我们常常需要在异步请求或者路由切换等场景下展示 loading 动画，以提升用户体验。如果每个组件都需要单独实现 loading 功能，那么代码会变得冗余而难以维护。这时候，我们可以使用 mixin 在全局范围内实现 loading 功能，避免重复代码，提高代码的可维护性。

mixin 是什么？

mixin 是 Vue 中实现代码复用的一种方式，它允许我们将一些公共的逻辑封装成一个 mixin 对象，然后在需要使用这些逻辑的组件中进行混入。通过 mixin，我们可以将相同的代码逻辑应用到多个组件中，避免了重复编写代码的问题。

实现全局 loading 功能的 mixin

下面我们来看一下如何使用 mixin 实现全局 loading 功能。

首先，我们需要定义一个名为 loadingMixin 的 mixin 对象，代码如下：

// javascriptcn.com 代码示例
const loadingMixin = {
  data() {
    return {
      isLoading: false, // 是否展示 loading
    };
  },
  methods: {
    showLoading() {
      this.isLoading = true;
    },
    hideLoading() {
      this.isLoading = false;
    },
  },
};

在 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 的展示和隐藏逻辑，代码如下：

// javascriptcn.com 代码示例
<template>
  <div>
    <loading v-if="isLoading"></loading>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
    };
  },
  created() {
    this.$on('showLoading', this.showLoading);
    this.$on('hideLoading', this.hideLoading);
  },
  methods: {
    showLoading() {
      this.isLoading = true;
    },
    hideLoading() {
      this.isLoading = false;
    },
  },
};
</script>

在 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