前言
在項(xiàng)目中，經(jīng)常會(huì)復(fù)用一些變量和函數(shù)盼樟，比如用戶的登錄token氢卡，用戶信息等。這時(shí)將它們?cè)O(shè)為全局的就顯得很重要了晨缴，全局變量和全局函數(shù)之間有一些相通之處译秦，它們其實(shí)很簡(jiǎn)單，但是有些人可能還不太了解击碗。簡(jiǎn)單總結(jié)分享一波筑悴，希望對(duì)你有所幫助。
定義全局變量
原理：使用模塊（.js或.vue文件）來管理全局變量稍途，最后使用
export暴露出去 （最好導(dǎo)出的格式為對(duì)象阁吝，方便在其他地方調(diào)用），當(dāng)其它地方需要使用時(shí)晰房，用import導(dǎo)入該模塊
1求摇、使用全局變量專用模塊射沟，掛載到main.js文件上面
全局變量模塊Global.vue定義如下：
const token='12345678';
const userStatus=false;
export default {
token, // 用戶token身份
userStatus // 用戶登錄狀態(tài)
}
模塊里的變量用export暴露出去殊者，當(dāng)其它地方需要使用時(shí)，引入模塊便可验夯。
使用全局變量：
import global from '../../components/Global'//引用模塊進(jìn)來
export default {
data () {
return {
token:global.token,//將全局變量賦值到data里面
}
}
}
2猖吴、全局變量模塊掛載到Vue.prototype上
Global.vue文件同上，在項(xiàng)目入口的main.js里配置：
import global from '../../components/Global'
Vue.prototype.GLOBAL = global
掛載之后挥转，在需要引用全局變量的模塊處海蔽，不需再導(dǎo)入全局變量模塊，而是直接用this就可以引用了绑谣，如下:
export default {
data () {
return {
token: this.GLOBAL.token,
}
}
}
方法一跟方法二的主要區(qū)別是党窜，方法二全局只需要導(dǎo)入一次就可以，簡(jiǎn)單方便借宵。
3幌衣、使用vuex定義全局變量
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)。因此可以存放著全局量豁护。
// index.js文件里定義vuex
import state from './state'
export default new Vuex.Store({
actions,
getters,
mutations,
state,
})
// state.js里面存放全局變量哼凯，并且暴露出去
const state = {
token：'12345678',
language: 'en',
}
export default state
使用的時(shí)候，在需要引用全局變量的模塊處直接使用this.$store調(diào)用
export default {
methods: {
getInternation() {
if (this.$store.state.language === 'en') {
this.internation = 2
} else if (this.$store.state.language === 'zh_CN') {
this.internation = 1
}
}
}
}
因?yàn)閂uex有點(diǎn)繁瑣楚里，有點(diǎn)殺雞用牛刀的感覺断部。因此認(rèn)為并沒有必要使用它。上面只是簡(jiǎn)單的使用班缎，如果想要具體了解使用方式蝴光，可以去查閱資料具體掌握。
定義全局函數(shù)
原理：在main.js里面通過Vue.prototype將函數(shù)掛載到Vue實(shí)例上面达址，通過this.函數(shù)名虱疏，來運(yùn)行函數(shù)。
1苏携、在main.js文件直接定義方法
簡(jiǎn)單的函數(shù)可以直接寫在main.js文件里定義做瞪。
// 將方法掛載到vue原型上
Vue.prototype.changeData = function (){
alert('執(zhí)行成功');
}
使用的時(shí)候組件里直接調(diào)用。
//直接通過this運(yùn)行函數(shù)右冻，這里this是vue實(shí)例對(duì)象
this.changeData();
2装蓬、使用全局函數(shù)專用模塊，掛載到main.js上面
base.js文件纱扭，文件位置可以放在跟main.js同一級(jí)牍帚，方便引用（這點(diǎn)可以依據(jù)個(gè)人習(xí)慣決定）。
exports.install = function (Vue, options) {
Vue.prototype.changeData = function (){
alert('執(zhí)行成功');
};
};
main.js引入并使用乳蛾。
import base from './base'
Vue.use(base);
所有的組件里就可以調(diào)用該函數(shù)暗赶。
this.changeData();
結(jié)語
以上是vue中全局變量和全局函數(shù)使用的全部?jī)?nèi)容。希望總結(jié)的東西對(duì)你有所幫組肃叶。還不太了解的可以多看幾遍蹂随，大家加油！Ｒ虿选岳锁！
