uni-app中全局变量Vue.prototyp与globalData不同及其注意

uni-app全局变量实现手段可以算是各式各样，今天只针对Vue.prototyp与globalData实现全局变量的注意事项。

一般数据比较小时，我们会用Vue.prototyp与globalData挂载与存储全局变量，在页面中调用及其更改。但是，有时，我们需要从App.vue中进行值的更改，比如接收另一个小程序传过来的信息，此时只能在App.vue中的onLaunch()或onShow()方法中进行值的更改，但是有个坑：

 

一、挂载 Vue.prototype，globalData不同之处

1、 两者不同：
 在App.vue中更改了全局变量值,在页面中进行调用时~
 通过Vue.prototype挂载的变量，更改并没有生效，通过方法调用更改值也一样无效
 通过globalData声明的变量，更改生效
            
 2、相同点：两者在页面中进行更改时，在页面中调用都会生效。

 

二、下面yiyi说明与分析：

1、初始化数据

在main.js中初始化数据：$val1、$valb

Vue.prototype.$vala = 1
Vue.prototype.$valb = 1
Vue.prototype.methodA = function(val){
	this.$valb = val
}

在App.vue中初始化数据：vala

globalData:{
    vala:1
},

 

2、在App.vue中对$val1、$valb、vala进行更改。

onLaunch: function() {

	// 更改值
	let that = this;

	// 通过globalData更改
	that.$options.globalData.vala = 20;
	console.log("globalData.vala", that.$options.globalData.vala) //20

	// 通过Vue.prototype挂载更改值
	that.$vala = 30;
	console.log("$vala", that.$vala) //30
	that.methodA(40);
	console.log("$valb", that.$valb) //40
}

由以上打印结果看出，在App.vue中值更改成功。

 

3、在页面（change.vue）中调用更改的值

onLoad() {
			// 挂载 Vue.prototype，globalData不同之处
			
			// 两者不同：
			// 一 在APP.vue中更改了全局变量值,在页面中进行调用时~
			// 通过Vue.prototype挂载的变量，更改并没有生效，通过方法调用更改值也一样无效
			// 通过globalData声明的变量，更改生效
			
			// 相同点：两者在页面中进行更改时，在页面中调用都会生效。
			
			
			let that = this;
			// 不同点验证
			console.log("拿到App.vue中更改后的值vala",app.globalData.vala); //20
			console.log("拿到App.vue更改后的值$vala",that.$vala); //1
			console.log("拿到App.vue更改后的值that.methodA(30);",that.$valb) //1
			
			
			// 相同点验证
			// 在页面change.vue中更改值
			app.globalData.vala = 100;
			console.log(app.globalData.vala); //100
			that.$vala = 200;
			console.log(that.$vala) //200
			that.methodA(300);
			console.log(that.$valb)  //300
		},
		

项目地址:https://github.com/Syleapn/globalChange.git