前言
在項目中,經常會複用一些變量和函數,比如用戶的登錄token,用戶信息等。這時將它們設爲全局的就顯得很重要了,全局變量和全局函數之間有一些相通之處,它們其實很簡單,但是有些人可能還不太瞭解。簡單總結分享一波,希望對你有所幫助。
定義全局變量
原理:使用模塊(.js或.vue文件)來管理全局變量,最後使用export
暴露出去 (最好導出的格式爲對象,方便在其他地方調用),當其它地方需要使用時,用import
導入該模塊
1、使用全局變量專用模塊,掛載到main.js文件上面
全局變量模塊Global.vue定義如下:
const token='12345678';
const userStatus=false;
export default {
token, // 用戶token身份
userStatus // 用戶登錄狀態
}
模塊裏的變量用export
暴露出去,當其它地方需要使用時,引入模塊便可。
使用全局變量:
import global from '../../components/Global'//引用模塊進來
export default {
data () {
return {
token:global.token,//將全局變量賦值到data裏面
}
}
}
2、全局變量模塊掛載到Vue.prototype上
Global.vue
文件同上,在項目入口的main.js
裏配置:
import global from '../../components/Global'
Vue.prototype.GLOBAL = global
掛載之後,在需要引用全局變量的模塊處,不需再導入全局變量模塊,而是直接用this
就可以引用了,如下:
export default {
data () {
return {
token: this.GLOBAL.token,
}
}
}
方法一跟方法二的主要區別是,方法二全局只需要導入一次就可以,簡單方便。
3、使用vuex定義全局變量
Vuex
是一個專爲Vue.js
應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態。因此可以存放着全局量。
// 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
使用的時候,在需要引用全局變量的模塊處直接使用this.$store
調用
export default {
methods: {
getInternation() {
if (this.$store.state.language === 'en') {
this.internation = 2
} else if (this.$store.state.language === 'zh_CN') {
this.internation = 1
}
}
}
}
因爲Vuex有點繁瑣,有點殺雞用牛刀的感覺。因此認爲並沒有必要使用它。上面只是簡單的使用,如果想要具體瞭解使用方式,可以去查閱資料具體掌握。
定義全局函數
原理:在main.js裏面通過Vue.prototype將函數掛載到Vue實例上面,通過this.函數名,來運行函數。
1、在main.js文件直接定義方法
簡單的函數可以直接寫在main.js
文件裏定義。
// 將方法掛載到vue原型上
Vue.prototype.changeData = function (){
alert('執行成功');
}
使用的時候組件裏直接調用。
//直接通過this運行函數,這裏this是vue實例對象
this.changeData();
2、使用全局函數專用模塊,掛載到main.js上面
base.js
文件,文件位置可以放在跟main.js
同一級,方便引用(這點可以依據個人習慣決定)。
exports.install = function (Vue, options) {
Vue.prototype.changeData = function (){
alert('執行成功');
};
};
main.js
引入並使用。
import base from './base'
Vue.use(base);
所有的組件裏就可以調用該函數。
this.changeData();
結語
以上是vue中全局變量和全局函數使用的全部內容。希望總結的東西對你有所幫組。還不太瞭解的可以多看幾遍,大家加油!!!