前言

在開(kāi)發(fā)的過(guò)程中，我們不可避免的用到全局變量，比如我們的請(qǐng)求的公共路徑這個(gè)變量；那么我們?cè)趗niapp中有哪幾種方式可以實(shí)現(xiàn)全局變量

1. 模塊

我們可以在項(xiàng)目中新建一個(gè)js文件，定義一個(gè)專用的模塊，用來(lái)管理全局的變量，在有需要的地方進(jìn)行引入！

比如，我在項(xiàng)目的根目錄中新建了一個(gè)config.js，寫入以下代碼

export const baseUrl = "https://www.baidu.com/"

在頁(yè)面中如下使用就是了

<script>
import { baseUrl } from '@/config.js';
export default {
	onLoad() {
		console.log(baseUrl);
	}
};
</script>

其實(shí)這種維護(hù)起來(lái)，我覺(jué)得還是比較方便的，但是缺點(diǎn)就是，我們需要用就需要引入。。。

2. Vue.prototype

這種用過(guò)vue的都知道，我們可以將項(xiàng)目中用的比較多的變量，方法掛在到vue.prototype上，每個(gè)vue對(duì)象都會(huì)去繼承這些方法變量

使用：main.js

Vue.prototype.$baseUrl = "https://www.baidu.com/"

頁(yè)面調(diào)用：

onLoad() {
	console.log(this.$baseUrl);
},

建議：在 Vue.prototype 上掛載的屬性或方法，可以加一個(gè)統(tǒng)一的前綴。比如 $url、global_url 這樣，在讀代碼的時(shí)候，更容易讓我們明白，這個(gè)變量是掛載到vue.prototype上的，特別注意，不要和頁(yè)面的局變量名稱一致，這個(gè)會(huì)有一些坑需要踩，之前已經(jīng)記錄過(guò)了：uniapp 微信小程序無(wú)法獲取Vue.prototype的值

3.  globalData

說(shuō)起來(lái)這個(gè)globalData，第一次寫uniapp項(xiàng)目的，可能都沒(méi)聽(tīng)說(shuō)過(guò)，但是只要寫過(guò)原生的小程序，這個(gè)概念其實(shí)并不陌生，uniapp后臺(tái)也兼容了這個(gè)東西，可以在app，h5，小程序端使用globalData全局變量，使用方法如下：

App.vue

export default {
	globalData: {
		baseUrl: 'https://www.baidu.com/'
	},
	onLaunch: function() {
		console.log('App Launch');
	},
	onShow: function() {
		console.log('App Show');
	},
	onHide: function() {
		console.log('App Hide');
	}
};
</script>

使用：

	onLoad() {
		// getApp().globalData.baseUrl = 'xxx'
		console.log(getApp().globalData.baseUrl);
	},

globalData適用于較小的項(xiàng)目，一旦涉及到比較大點(diǎn)復(fù)雜點(diǎn)的項(xiàng)目，我都建議不要用，給我的感覺(jué)就是不咋好用0.0

4. vuex

這個(gè)東西都不必多說(shuō)的，vue全家桶之一，必備技能！Vuex 是什么？ | Vuex

也可以看之前我寫的vuex的文章

vuex 進(jìn)階篇（1）取值

??????vuex 進(jìn)階篇 （2）改變state mutations的使用

vuex 進(jìn)階篇 （3）actions的使用

vuex 進(jìn)階篇 （4）getters的使用

總的來(lái)說(shuō)，項(xiàng)目中建議，使用模塊存放我們的一些全局變量，默認(rèn)配置項(xiàng)，在vue.prototype中掛載常用的函數(shù)，比如模態(tài)框，反查字典等等，使用vuex進(jìn)行全局的狀態(tài)管理

總結(jié)

到此這篇關(guān)于uniapp實(shí)現(xiàn)全局變量的幾種方式總結(jié)的文章就介紹到這了,更多相關(guān)uniapp實(shí)現(xiàn)全局變量?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論