【UniApp】-uni-app-全局数据和局部数据
前言
- 好,经过上个章节的介绍完毕之后,了解了一下 uni-app-全局样式和局部样式
- 那么了解完了全局样式和局部样式之后,这篇文章我再来给大家介绍一下 UniApp 中全局数据和局部数据
搭建演示环境
创建一个全新的项目:
然后在配置一下,微信小程序的 AppId,直接去之前的项目中拷贝一下即可,找到之前项目的 manifest.json
文件,然后选择微信小程序配置,复制一下即可:
- 经过如上的这么一顿操作之后,就可以搭建完毕运行环境,与编码环境
步入正题
全局数据
- 先来看一下全局数据,全局数据在微信小程序中怎么搞?在微信小数据中是不是有个
globalData
- 那么在 UniApp 当中也有 globalData,回到官方文档,然后找到
全局文件
- 在全局文件中找到
App.vue/uvue
- 点击
App.vue/uvue
就可以发现这里有globalData
官方介绍:
- 小程序有 globalData,这是一种简单的全局变量机制。这套机制在uni-app里也可以使用,并且全端通用
- 当然vue框架的全局变量,另有其他方式定义
- 好了看完之后我们来验证一下,官方说明了 globalData 是定义在 App.vue 中,所以我们也需要这么来写
定义全局数据
- 打开新创建好的项目然后,找到 App.vue 文件
- 我定义了两个属性分别是 name, age
globalData: {
name: 'BNTang',
age: 18
}
获取全局数据
- 我们定好了数据,是不是要进行使用
- 使用方式在官方也是有介绍的,官方是这么说的:js 中操作 globalData 的方式通过
getApp().globalData.text = 'test'
首页
- 我们在首页输出打印一下全局的数据就相当于使用了好吧,更改 index.vue
onLoad() {
console.log("全局数据: ", JSON.stringify(getApp().globalData));
}
测试
Web端
- 在官方文档中,提到了
并且全端通用
,所以我这里还需要在运行在微信小程序上看看效果
微信小程序
总结
- 使用全局数据,只需要在 App.vue 当中通过 globalData 来保存数据
- 然后在其他页面当中通过
getApp().globalData
来获取保存的全局数据
这里大家可以看到我的文章目录中没有体现局部数据,局部数据其实是和 vue 一样,在自己页面的 data 中返回一个对象,然后在这个对象中定义的属性就是局部数据,没什么好说的所以我这里就没有单独起一个 title 来进行介绍。
最后
大家好我是 BNTang, 一个热爱分享的技术的开发者,如果大家觉得我的文章对你有帮助的话,可以关注我的公众号
JavaBoyL
,我会在公众号中分享一些IT技术和一些个人的见解,谢谢大家的支持