vue 封装全局函数和全局变量

在开发项目的过程中，有些函数的使用频率很高，每个页面都写的话太繁琐，可以将其封装成全局函数传参使用。

有些变量比如图片的路径（接口返回的  /***/***/.jpg）,没有http://的部分，需要自己拼接，且后期需要修改http://部分，去一个一个修改肯定不现实，因此需要单独封装，方便后期修改。

 1、在src文件夹下新建utils文件夹，新建globalfunc.js和globalvar.js文件

封装全局函数

在globalfunc.js文件，多个函数之间用 逗号 隔开；

方法一：

export default {
    fun1(val){
        alert(val,'可传参')
    },
    fun2(){
        return 'fun2不用传参！！！'
    }
}

方法二：

const fun1=(val)=>{
    alert(val,'可传参')
};
const fun2=()=>{
    return 'fun2不用传参！！！'
};
const fun3=(val=333)=>{
    return 'fun3'+val;
};

export default {
    fun1,fun2,fun3
}

在main.js中引入并注册

import globalfunc from './utils/globalfunc'
//注册全局函数
Vue.prototype.globalfunc=globalfunc;

在vue文件中使用

<template>
  <div class="about">
    {{ globalfunc.fun2()}}<!-- 全局函数--不需要传参的 -->
  </div>
</template>
<script>
export default {
  created() {
    this.globalfunc.fun1("传参666"); /* <!-- 全局函数--需要传参的 --> */
  },
};
</script>

封装全局变量

方法一：

在globalvar.js文件，多个变量之间用 逗号 隔开；

const BASEURL ='http://11.22.33.10';
const NAME ='上杉绘梨衣';
export default{
    BASEURL,NAME
}

在main.js中引入并注册

import globalvar from './utils/globalvar'
//注册全局变量
Vue.prototype.globalvar=globalvar;

方法二：

export default{
    install(Vue){
        Vue.prototype.globalvar={
            CONTENT:"全局变量",
            AGE:18
        }
    }
}

在main.js中引入并注册

import globalvar from './utils/globalvar'
//注册全局变量
Vue.use(globalvar)

在vue文件中使用

<template>
  <div class="about">
    {{ globalvar.NAME }}<!-- 全局变量 -->
  </div>
</template>
<script>
export default {
  created() {
    console.log(this.globalvar.NAME); /* 全局变量 */
  },
};
</script>