添加全局功能

最近遇到一个问题，在封装了axios之后，每次调用时都需要先引入，这样很麻烦，于是就想能不能添加成全局功能。在vue官方文档中，找到了插件开发一节。

添加实例方法

比如要定义一个fetch插件，用来完成ajax操作。

fetch.js

const install = function (Vue) {
  // 通过installed属性判断组件是否注册过
  if (install.installed) {
    return
  }
  install.installed = true;
  
  // Object.defineProperties()方法直接在现有的对象上定义新的属性或修改现有属性，并返回该对象
// 即在Vue.prototype上添加了$fetch
  Object.defineProperties(Vue.prototype, {
    $fetch: {
      get() {
        return xxx   // 这里返回定义的fetch功能
      }
    }
  })
}

export default {
  install
}

不理解get()的同学请查阅Object/defineProperties的文档MDN、MSDN

main.js

import Vue from 'vue'
import fetch from 'fetch.js'

// 调用 `fetch.install(Vue)`
Vue.use(fetch)

这样在组件中直接通过this.$fetch就可以调用

添加全局方法

全局方法是，直接添加在vue上，而不是vue.prototype。

fetch.js

const install = function (Vue) {
  // 通过installed属性判断组件是否注册过
  if (install.installed) {
    return
  }
  install.installed = true;
  
  Vue.$fetch = xxxx
  }

export default {
  install
}

main.js

import Vue from 'vue'
import fetch from 'fetch.js'

// 调用 `fetch.install(Vue)`
Vue.use(fetch)

此时不可以通过this调用$fetch方法，而必须通过引入vue调用。

可以把$fetch理解成是类的静态方法，通过实例无法调用