vue设置全局变量和函数
一. 定义全局变量:1. 首先,创建一个全局变量模块文件,在模块里定义一些变量, export default语句暴漏出去。2. 我们使用全局变量有两种方式:创建Global.vue文件<script>const name = 'https://mp.csdn.net/mdeditor#';
·
一. 定义全局变量:
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)
})
})
}
- 然后,我们开始在main.js中引入,
/**
* 引入自定义方法
*/
import base from './config/global_func.js'
Object.keys(base).forEach((key) => { //循环遍历文件中的函数
Vue.prototype[key] = base[key] //挂载到Vue实例属性上
});
- 那么如何调用公共函数呢?(注意GET和我上面公共函数文件里面的函数键要一致)
更多推荐
已为社区贡献3条内容
所有评论(0)