vue实现公共方法抽离

下面是“Vue实现公共方法抽离”的完整攻略，其中包含两个示例。

1. 需求背景

在Vue项目中，有一些公共方法会被多个组件共用，为了避免代码冗余，我们需要将这些公共方法抽离出来，然后挂载到Vue的prototype上，以便全局调用。

2. 具体实现步骤

2.1 抽离公共方法

将多个组件中共用的方法，抽离出来，建议以模块化的方式管理。下面是一个示例，假设我们将/utils目录下的common.js文件中的公共方法抽离出来：

// /utils/common.js

export function formatDate(date) {
  // ... 格式化日期的代码
}

export function showLoading(msg) {
  // ... 显示loading的代码
}

export function hideLoading() {
  // ... 隐藏loading的代码
}

2.2 挂载到Vue原型链上

将抽离出来的公共方法，挂载到Vue的prototype上，这样所有组件都可以通过this访问这些方法。下面是一个示例：

import Vue from 'vue'
import { formatDate, showLoading, hideLoading } from '@/utils/common.js'

Vue.prototype.$formatDate = formatDate
Vue.prototype.$showLoading = showLoading
Vue.prototype.$hideLoading = hideLoading

2.3 在组件中使用

在组件中使用这些方法时，可以通过this.$方法名访问。例如：

// MyComponent.vue

export default {
  methods: {
    handleClick() {
      this.$showLoading('正在加载，请稍后...')
      // 发送请求...
      this.$hideLoading()
    }
  }
}

3. 示例说明

下面是两个具体的示例，分别是一个全局的loading组件和一个全局的message组件。

3.1 全局loading组件

这是一个全局的loading组件，它会在网络请求时显示loading动画。

// /components/Loading.vue

<template>
  <div class="loading" v-show="show">
    <i class="icon-loading"></i>
    <span>{{ message }}</span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false, // 是否显示loading
        message: '' // loading提示信息
      }
    },
    created() {
      this.$on('showLoading', this.handleShowLoading)
      this.$on('hideLoading', this.handleHideLoading)
    },
    methods: {
      handleShowLoading(msg) {
        this.message = msg || '正在加载...'
        this.show = true
      },
      handleHideLoading() {
        this.show = false
      }
    }
  }
</script>

<style scoped>
  .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.5);
  }

  .loading i {
    margin-bottom: 10px;
    font-size: 24px;
  }

  .loading span {
    font-size: 14px;
    color: #fff;
  }
</style>

将该组件挂载到全局，以便在所有组件中使用。

import Vue from 'vue'
import Loading from '@/components/Loading.vue'

Vue.component('Loading', Loading)

最后，在API请求时，可以通过发布订阅模式来显示、隐藏loading组件。

import axios from 'axios'

axios.interceptors.request.use(config => {
  Vue.prototype.$showLoading('正在加载，请稍后...')
  return config
}, error => {
  Vue.prototype.$hideLoading()
  // 处理请求错误
  return Promise.reject(error)
})

axios.interceptors.response.use(response => {
  Vue.prototype.$hideLoading()
  // 处理响应数据
  return response.data
}, error => {
  Vue.prototype.$hideLoading()
  // 处理响应错误
  return Promise.reject(error)
})

3.2 全局message组件

这是一个全局的message组件，它会在需要提示用户操作结果的时候，显示一个浮层提示。

// /components/Message.vue

<template>
  <div class="message-wrapper" v-show="show">
    <div class="message-box" :class="type">
      <i class="icon-close" @click="handleClose"></i>
      <div class="message-text">{{ text }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        type: '',
        text: ''
      }
    },
    created() {
      this.$on('showMessage', this.handleShowMessage)
      this.$on('hideMessage', this.handleHideMessage)
    },
    methods: {
      handleShowMessage({type, text}) {
        this.type = type || 'info'
        this.text = text || '提示'
        this.show = true
        setTimeout(this.handleHideMessage, 3000)
      },
      handleHideMessage() {
        this.show = false
      },
      handleClose() {
        this.handleHideMessage()
      }
    }
  }
</script>

<style scoped>
  .message-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .message-box {
    position: relative;
    width: 300px;
    padding: 15px;
    border-radius: 5px;
    background: #fff;

    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  }

  .message-box.success {
    background: #ecf8ec;
  }

  .message-box.warning {
    background: #fff4d9;
  }

  .message-box.error {
    background: #fbe5e5;
  }

  .message-box i {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #999;
    cursor: pointer;
  }

  .message-text {
    font-size: 14px;
    color: #333;
  }
</style>

将该组件挂载到全局。

import Vue from 'vue'
import Message from '@/components/Message.vue'

Vue.component('Message', Message)

最后，在需要提示用户操作结果的地方，可以通过发布订阅模式来显示提示。

// 提示成功
Vue.prototype.$messageSuccess = function(text) {
  this.$emit('showMessage', {type: 'success', text})
}

// 提示警告
Vue.prototype.$messageWarning = function(text) {
  this.$emit('showMessage', {type: 'warning', text})
}

// 提示错误
Vue.prototype.$messageError = function(text) {
  this.$emit('showMessage', {type: 'error', text})
}

4. 总结

通过将常用的公共方法抽离出来，并挂载到Vue原型链上，可以提升开发效率，减少代码冗余。在实际开发中，我们还可以把公共的逻辑抽象成一个类或者混入，以便更好地复用。