Vue.js学习（十二）—— Vue 全局挂载自定义函数

　　使用vue 时，有时需要设置公共的函数，便于在所有组件中调用或者在组件的生命周期中都可调用，这便需要自定义全局函数。以下介绍一些全局函数的定义方式。

 

一、所有组件可调用

1、方法一：Vue.prototype

　　在main.js中写入函数

Vue.prototype.getToken = function (){
  ...
}

　　在所有组件里可调用函数

this.getToken();

2、方法二：exports.install+Vue.prototype

　　写好自己需要的公共JS文件（fun.js）

exports.install = function (Vue, options) {
    Vue.prototype.getToken = function (){
       ...
    };
};

　　main.js引入并使用

import fun from './fun'   // 路径示公共JS位置决定
Vue.use(fun);

　　所有组件里可调用函数

this.getToken();

　　可能遇到的问题：在用了exports.install方法时，运行报错exports is not defined
　　解决方法：

export default {
    install(Vue)  {
        Vue.prototype.getToken = {
           ...
        }
    }
}

3、方法三：在utils下创建function.js，并导出挂载到Vue原型

# function.js
class Func {
    /**
     * 存储Storage
     */
    setStorage(name, content, type = "local") {
      if (!name) return;
      let storage;
      //必须判断是否字符串
      if (typeof content !== "string") {
        content = JSON.stringify(content);
      }
      type === "local"
        ? (storage = window.localStorage)
        : (storage = window.sessionStorage);
      storage.setItem(name, content);
    }
}
export default new Func();

# utils/index.js
import Vue from "vue";
import myService from "./request";
import Func from "./function";

Vue.prototype = Object.assign(Vue.prototype, {
  $axios: myService,
  $F: Func,
});

//使用
this.$F.setStorage()