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