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

冷不防 2023-08-17 16:44 70阅读 0赞

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][https_github.com_Syleapn_globalChange.git]

[https_github.com_Syleapn_globalChange.git]: https://github.com/Syleapn/globalChange.git