如何设置Vue全局公共方法

前言

在开发中，为了提高重用性，简洁代码，往往需要把代码的公共部分提取出来，形成一个可复用的模块。

当代码提取出来形成模块后，要实现所有地方都可以引用，就需要把这些模块设置成全局属性。

所以，要实现全局公共方法

我们需要知道以下几个知识点：

• 怎么设置全局属性；
• 怎么引用全局属性；

一、设置全局属性

全局属性可以分为：全局变量和全局方法。

实现全局变量，常用的手段就是使用vuex （关于vuex 的使用方法这里不详细说明了），还有一种方法就是借助原型属性来实现。

下面，我将重点讲一下原型。

二、引用全局属性

在使用Vue时，我们都要写这么一串代码：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

上面代码是借助Vue构造函数创建一个Vue对象。

从这可以看出，Vue其实是一个对象。那么我们就可以借助Vue的原型实现对全局属性的引用。

首先，我们需要了解以下知识点：

什么是原型？

在js 代码中，我们经常会看到一个属性prototype 。他是构造函数（就是用来构造对象的函数）的属性，用于指向原型对象。

那什么是原型对象呢？

了解“原型对象”，我们需要把“原型”和“对象”拆开来说明。

先说对象，js 的内建对象有很多，例如：String 、Math 、Object 、Array 等等。

// 声明一个数组对象
const arr = Array();

以上是使用内建对象——数组的构造函数，创建一个数组。

当然，我们也可以设置自定义对象，也就是自己设置一个新的对象。

const obj = {};

以上代码就是设置了一个空对象。

那内建对象和自定义对象有什么区别呢？

内建对象和自定义对象的区别，就是内建对象自带了一些属性和方法。就如上面声明的数组对象。我们可以通过arr.length 属性来获数组的长度，或者可以通过arr.push() 方法来向数组新增一个元素。而自定义对象就没有这些属性和方法。这时，我们就会很疑惑，为什么同样是对象，两者的区别就这么大的区别呢？难到是上帝不公，创造的时候给了不同的待遇？

嘿！还别说，就是上帝（js源码）创造的时候设定的，但是他并不是不公，而是为了分工合作。但是，上帝还是为了广大民众着想留了后门——把他创造的工具留了下来。

那就是原型的访问工具 prototype 和 __proto__。

其实，内建元素跟自定义元素的区别就是在于原型的不同（没错，自定义元素也是有原型的，只是这个原型是Object 内建对象的原型）。

直观的说，原型是预先设定好的对象（可以说是我们创建的对象的祖先啦！），里面预设了各种各样的方法。

下面我们来看看arr 和 obj 的原型

上图的__proto__对象就是原型对象了。__proto__属性是一个指针（地址），指向了原型。原型原型，原本的形状。原型是一类对象的初始。所以不同的类型对象有着不同的原型。

__proto__与prototype的区别

到这里，可能大家就有点懵了。怎么又出现了prototype？不是__proto__吗？别急，现在就捋捋两者的关系。

首先，__proto__是对象的属性，指向对象的构造函数的原型。而prototype是函数的属性，指向它的原型。

其次，对象都是由函数（也就是构造函数）生成的。（这一点非常重要。要理解原型就要理解这句话，如果不理解就把它当做定理。）

基于以上两点可得出下图：

以上就是prototype 和 __proto__的关系了。

三、全局共用方法添加与引用

借助原型实现全局共用方法的添加

至此，我们具备一下几点：

有访问的工具–prototype和 __proto__；原型是个对象，意味着我们可以对原型进行属性的增删改查;基于同一原型生成的对象，所有的对象的原型都是同一个。

那么，只要修改原型，所有基于同一原型生成的对象的原型都同步改变;

基于以上三点，只要我们在Vue实例化前借助prototype把全局公共方法挂载到原型上，就能让公共方法实现全局访问。

在main.js中注册全局共用方法：

Vue.prototype.fn = function(){
  console.log("全局公共方法")
};
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

引用全局共用方法

全局共用方法可以通过两种手段来使用：

• vue实例化对象的作用域—— this
• main.js 注册全局共用方法后的 Vue.prototype

在组件中或者生命周期中直接通过this.fn()调用即可。

如果是通过Vue.prototype.fn()来调用，必须保证调用处的代码在全局公共方法注册代码后面执行。

四、全局公共方法优化

虽然我们已经知道将方法挂载在Vue.prototype 就可以实现全局公共方法。

但是呢！当全局公共方法有很多时，我们就得需要写很多个Vue.prototype 。

这显然是不符合代码美观的。Vue.prototype 挂一个方法也是挂，挂一个对象也是挂。

那为什么我们不把所有的全局方法写在同一个js 文件中呢？

创建commonApi.js

function fn1(){
  console.log("全局方法一")
}
function fn2(){
  console.log("全局方法二")
}
function fn3(){
  console.log("全局方法三")
}
function fn4(){
  console.log("全局方法四")
}
// 将四个全局公共方法，组合成一个对象，并暴露出去
export default {
  fn1,
  fn2,
  fn3,
  fn4,
}

在main.js 进行配置：

import commonApi from './store/commonApi'
Vue.prototype.commonApi = commonApi;

组件内通过this引用：

text(){
  this.commonApi.fn1();
}

总结

以上就是新建全局公用的方法了。

这些仅为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论