vue項目中定義全局變量、函數的幾種方法
前言
在項目中，經常會復用一些變量和函數，比如用戶的登錄token，用戶信息等。這時將它們設為全局的就顯得很重要了，全局變量和全局函數之間有一些相通之處，它們其實很簡單，但是有些人可能還不太了解。簡單總結分享一波，希望對你有所幫助。
定義全局變量
原理：使用模塊（.js或.vue文件）來管理全局變量，最后使用export暴露出去 （最好導出的格式為對象，方便在其他地方調用），當其它地方需要使用時，用import導入該模塊
1、使用全局變量專用模塊，掛載到main.js文件上面
全局變量模塊Global.vue定義如下：
const token='12345678';
const userStatus=false;
export default {
token, // 用戶token身份
userStatus // 用戶登錄狀態(tài)
}
模塊里的變量用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,
}
}
}
方法一跟方法二的主要區(qū)別是，方法二全局只需要導入一次就可以，簡單方便。
3、使用vuex定義全局變量
Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(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
使用的時候，在需要引用全局變量的模塊處直接使用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('執(zhí)行成功');
}
使用的時候組件里直接調用。
//直接通過this運行函數，這里this是vue實例對象 this.changeData();
2、使用全局函數專用模塊，掛載到main.js上面
base.js文件，文件位置可以放在跟main.js同一級，方便引用（這點可以依據個人習慣決定）。
exports.install = function (Vue, options) {
Vue.prototype.changeData = function (){
alert('執(zhí)行成功');
};
};
main.js引入并使用。
import base from './base' Vue.use(base);
所有的組件里就可以調用該函數。
this.changeData();
結語
以上是vue中全局變量和全局函數使用的全部內容。希望總結的東西對你有所幫組。還不太了解的可以多看幾遍，大家加油！?。∫蚕Ｍ蠹叶喽嘀С帜_本之家。
相關文章
Vue監(jiān)聽一個數組id是否與另一個數組id相同的方法
今天小編就為大家分享一篇Vue監(jiān)聽一個數組id是否與另一個數組id相同的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在日常開發(fā)中,彈窗是常見的一個功能,本文主要介紹了vue3使用useDialog實現對話框的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要為大家詳細介紹了VUE前端cookie簡單操作代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
在vue3+vite創(chuàng)建的項目中使用vuex，要注意的是vite有部分寫法和之前的webpack是不同的，這篇文章主要介紹了vue3+vite中使用vuex的具體步驟,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了關于vuepress部署出現樣式的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3?+?elementPlus?reset重置表單問題
這篇文章主要介紹了vue3?+?elementPlus?reset重置表單問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
解析使用useDark(),發(fā)現transition?動畫失效
這篇文章主要為大家介紹了使用useDark(),發(fā)現transition動畫失效的示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
Vue?提供了雙向數據綁定機制,使得開發(fā)者可以輕松地將表單組件的值與?Vue?實例中的數據進行關聯,本文將詳細介紹如何在?Vue?中使用這些表單組件,并實現雙向數據綁定,需要的可以參考下2024-03-03
這篇文章主要為大家詳細介紹了Vue3+Ts如何實現緩存,用戶搜索詞本地排名,延遲消費或者消息隊列,用戶簽到和鎖,以及接口限流,還有全局ID等功能,需要的可以參考下2024-03-03
element-plus 在vue3 中不生效的原因解決方法(element-plus引入)
這篇文章主要介紹了element-plus 在vue3 中不生效的原因解決方法(element-plus引入),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08