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


           

发布了32 篇原创文章 · 获赞 57 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/Syleapn/article/details/101683755
今日推荐