這篇文章將為大家詳細(xì)講解有關(guān)怎么在vue項(xiàng)目中定義全局變量，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

十余年的靜樂(lè)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整靜樂(lè)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“靜樂(lè)網(wǎng)站設(shè)計(jì)”,“靜樂(lè)網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

定義全局變量

原理：使用模塊（.js或.vue文件）來(lái)管理全局變量，最后使用export暴露出去 （最好導(dǎo)出的格式為對(duì)象，方便在其他地方調(diào)用），當(dāng)其它地方需要使用時(shí)，用import導(dǎo)入該模塊

1、使用全局變量專(zhuān)用模塊，掛載到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)來(lái)
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è)專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(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)殺雞用牛刀的感覺(jué)。因此認(rèn)為并沒(méi)有必要使用它。上面只是簡(jiǎn)單的使用，如果想要具體了解使用方式，可以去查閱資料具體掌握。

定義全局函數(shù)

原理：在main.js里面通過(guò)Vue.prototype將函數(shù)掛載到Vue實(shí)例上面，通過(guò)this.函數(shù)名，來(lái)運(yùn)行函數(shù)。

1、在main.js文件直接定義方法

簡(jiǎn)單的函數(shù)可以直接寫(xiě)在main.js文件里定義。

// 將方法掛載到vue原型上
Vue.prototype.changeData = function (){
 alert('執(zhí)行成功');
}

使用的時(shí)候組件里直接調(diào)用。

//直接通過(guò)this運(yùn)行函數(shù)，這里this是vue實(shí)例對(duì)象
this.changeData();

2、使用全局函數(shù)專(zhuān)用模塊，掛載到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();

關(guān)于怎么在vue項(xiàng)目中定義全局變量就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。