vue设置全局变量和函数

一. 定义全局变量：
1. 首先，创建一个全局变量模块文件，在模块里定义一些变量， export default语句暴漏出去。
2. 我们使用全局变量有两种方式：
创建Global.vue文件

<script>
const name = 'https://mp.csdn.net/mdeditor#';
    export default{
      name 
    }
</script>

方式一：当然，我们也可以在所需要的模块中直接引入。

 <template>
    <div>{{ name}}</div>
</template>
<script>
import global from '../../components/Global.vue'           // 引用模块进来
export default {
 data () {
    return {
         name:global.name   ,//将全局变量赋值到data里面，也可以直接使用global.name
        }
    }
}
</script>
<style lang="scss" scoped>
</style>

方式二：我们在main.js中引入，通过vue.prototype挂载到Vue 实例上面。
main.js文件里面，将上面那个Global.vue文件挂载到Vue.prototype。

import global from './components/Global'//引用文件
Vue.prototype.GLOBAL = global//挂载到Vue实例上面

然后，可以直接在任何组件中直接——>global.+你的变量名 就行了。

定义全局函数：
首先，我们新建一个公共函数文件，命名为global_func.js。
1.global_func.js里的代码如下（GET请求和POST请求的二次封装,里面的代码逻辑可以忽略，主要是领会创建全局函数的思想）：

export default {
    //get请求
    GET: function (url, param = {}) {
        if(store.state.user){      //用户只要处于登录状态，每一次get请求都要带着api_token
            param['api_token'] = store.state.user.api_token;
        }
        return new Promise((resolve, reject) => {
            axios({
                method: 'get',
                url,
                params: param,
            }).then(res => {
                resolve(res)
            })
        })
    },
    //post请求
    POST: function (url, param = {}) {
        if(store.state.user){      //用户只要处于登录状态，每一次post请求都要带着api_token
            param['api_token'] = store.state.user.api_token;
        }
        return new Promise((resolve, reject) => {
            axios({
                method: 'post',
                url,
                data: param,
                headers: {
                    "Content-Type":"application/json;charset=utf-8"
                }
            }).then(res => {
                resolve(res)
            })
        })
    }

2. 然后，我们开始在main.js中引入，

/**
 * 引入自定义方法
 */
import base from './config/global_func.js'
Object.keys(base).forEach((key) => {  //循环遍历文件中的函数
    Vue.prototype[key] = base[key]    //挂载到Vue实例属性上
});

3. 那么如何调用公共函数呢？（注意GET和我上面公共函数文件里面的函数键要一致)