淺談在vue項目中如何定義全局變量和全局函數(shù)
寫在前面：
如題，在項目中，經常有些函數(shù)和變量是需要復用，比如說網站服務器地址，從后臺拿到的：用戶的登錄token,用戶的地址信息等，這時候就需要設置一波全局變量和全局函數(shù)，這兩個設置不太難，而且有一些共通之處，可能有一些朋友對此不太了解，所以隨便寫出來分享一波。有需要的朋友可以做一下參考，喜歡的可以點波贊，或者關注一下，希望可以幫到大家。
定義全局變量
原理：
設置一個專用的的全局變量模塊文件，模塊里面定義一些變量初始狀態(tài)，用export default 暴露出去，在main.js里面使用Vue.prototype掛載到vue實例上面或者在其它地方需要使用時，引入該模塊便可。
全局變量模塊文件：
Global.vue文件：
<script>
const serverSrc='www.baidu.com';
const token='12345678';
const hasEnter=false;
const userSite="中國釣魚島";
export default
{
userSite,//用戶地址
token,//用戶token身份
serverSrc,//服務器地址
hasEnter,//用戶登錄狀態(tài)
}
</script>
使用方式1：
在需要的地方引用進全局變量模塊文件，然后通過文件里面的變量名字獲取全局變量參數(shù)值。
在text1.vue組件中使用：
<template>
<div>{{ token }}</div>
</template>
<script>
import global_ from '../../components/Global'//引用模塊進來
export default {
name: 'text',
data () {
return {
token:global_.token,//將全局變量賦值到data里面，也可以直接使用global_.token
}
}
}
</script>
<style lang="scss" scoped>
</style>
使用方式2：
在程序入口的main.js文件里面，將上面那個Global.vue文件掛載到Vue.prototype。
import global_ from './components/Global'//引用文件 Vue.prototype.GLOBAL = global_//掛載到Vue實例上面
接著在整個項目中不需要再通過引用Global.vue模塊文件，直接通過this就可以直接訪問Global文件里面定義的全局變量。
text2.vue：
<template>
<div>{{ token }}</div>
</template>
<script>
export default {
name: 'text',
data () {
return {
token:this.GLOBAL.token,//直接通過this訪問全局變量。
}
}
}
</script>
<style lang="scss" scoped>
</style>
Vuex也可以設置全局變量：
通過vuex來存放全局變量，這里東西比較多，也相對復雜一些，有興趣的小伙伴們，可自行查閱資料，折騰一波、
定義全局函數(shù)
原理
新建一個模塊文件，然后在main.js里面通過Vue.prototype將函數(shù)掛載到Vue實例上面，通過this.函數(shù)名，來運行函數(shù)。
1. 在main.js里面直接寫函數(shù)
簡單的函數(shù)可以直接在main.js里面直接寫
Vue.prototype.changeData = function (){//changeData是函數(shù)名
alert('執(zhí)行成功');
}
組件中調用：
this.changeData();//直接通過this運行函數(shù)
2. 寫一個模塊文件，掛載到main.js上面。
base.js文件，文件位置可以放在跟main.js同一級，方便引用
exports.install = function (Vue, options) {
Vue.prototype.text1 = function (){//全局函數(shù)1
alert('執(zhí)行成功1');
};
Vue.prototype.text2 = function (){//全局函數(shù)2
alert('執(zhí)行成功2');
};
};
main.js入口文件：
import base from './base'//引用 Vue.use(base);//將全局函數(shù)當做插件來進行注冊
組件里面調用：
this.text1(); this.text2();
后話
上面就是如何定義全局變量 全局函數(shù)的內容了，這里的全局變量全局函數(shù)可以不局限于vue項目，vue-cli是用了webpack做模塊化，其他模塊化開發(fā)，定義全局變量、函數(shù)的套路基本上是差不多。上文只是對全局變量，全局函數(shù)的希望看完本文能給大家一點幫助。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于Vue腳手架學習之項目創(chuàng)建方式的相關資料，文中通過介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
Vue 頁面狀態(tài)保持頁面間數(shù)據(jù)傳輸?shù)囊环N方法(推薦)
vue router給我們提供了兩種頁面間傳遞參數(shù)的方式,一種是動態(tài)路由匹配，一種是編程式導航，接下來通過本文給大家介紹Vue 頁面狀態(tài)保持頁面間數(shù)據(jù)傳輸?shù)囊环N方法,需要的朋友可以參考下2018-11-11
今天小編就為大家分享一篇vue 利用路由守衛(wèi)判斷是否登錄的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文詳細介紹了從vue的組件傳值著手觀察者模式，感興趣的同學，可以參考下，理解其原理。2021-06-06
這篇文章主要介紹了Vue.js 中的 v-cloak 指令及使用詳解，通過案例給大家簡單介紹了vue中v-cloak的使用，感興趣的朋友跟隨小編一起看看吧2018-11-11
Axios提供了取消請求的功能,可以通過使用CancelToken來實現(xiàn),這篇文章主要給大家介紹了關于axios取消請求CancelToken的用法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了15分鐘上手vue3.0，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)登陸注冊效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
通過實例解析chrome如何在mac環(huán)境中安裝vue-devtools插件
這篇文章主要介紹了通過實例解析chrome如何在mac環(huán)境中安裝vue-devtools插件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
vue-admin-box第一步npm?install時報錯的處理
這篇文章主要介紹了vue-admin-box第一步npm?install時報錯的處理方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10