前言

在開發(fā)的過程中，我們不可避免的用到全局變量，比如我們的請求的公共路徑這個變量；那么我們在uniapp中有哪幾種方式可以實現(xiàn)全局變量

1. 模塊

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

比如，我在項目的根目錄中新建了一個config.js，寫入以下代碼

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

在頁面中如下使用就是了

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

其實這種維護(hù)起來，我覺得還是比較方便的，但是缺點就是，我們需要用就需要引入。。。

2. Vue.prototype

這種用過vue的都知道，我們可以將項目中用的比較多的變量，方法掛在到vue.prototype上，每個vue對象都會去繼承這些方法變量

使用：main.js

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

頁面調(diào)用：

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

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

3.  globalData

說起來這個globalData，第一次寫uniapp項目的，可能都沒聽說過，但是只要寫過原生的小程序，這個概念其實并不陌生，uniapp后臺也兼容了這個東西，可以在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適用于較小的項目，一旦涉及到比較大點復(fù)雜點的項目，我都建議不要用，給我的感覺就是不咋好用0.0

4. vuex

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

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

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

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

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

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

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

總結(jié)

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

最新評論