【UniApp】-uni-app-全局数据和局部数据

合集 - UniApp(23)

1.【UniApp】-uni-app概述2023-12-072.【UniApp】-uni-app全局样式和局部样式2023-12-07

3.【UniApp】-uni-app-全局数据和局部数据2023-12-08

4.【UniApp】-uni-app-内置组件2023-12-095.【UniApp】-uni-app-扩展组件2023-12-096.【UniApp】-uni-app-修改组件主题和样式2023-12-107.【UniApp】-uni-app-OptionAPI应用生命周期和页面生命周期2023-12-108.【UniApp】-uni-app-CompositionAPI应用生命周期和页面生命周期2023-12-119.【UniApp】-uni-app-路由2023-12-1610.【UniApp】-uni-app-传递数据2023-12-1611.【UniApp】-uni-app-CompositionAPI传递数据2023-12-1712.【UniApp】-uni-app-数据传递补充2023-12-1713.【UniApp】-uni-app-数据缓存2023-12-1714.【UniApp】-uni-app-pinia存储数据2023-12-1915.【UniApp】-uni-app-网络请求2023-12-2016.【UniApp】-uni-app-自定义组件2023-12-2117.【UniApp】-uni-app-项目实战页面布局(苹果计算器)2023-12-2418.【UniApp】-uni-app-处理项目输入数据(苹果计算器)2023-12-2419.【UniApp】-uni-app-动态计算字体大小(苹果计算器)2023-12-2520.【UniApp】-uni-app-项目计算功能(苹果计算器)2023-12-2621.【UniApp】-uni-app-打包成网页2023-12-2822.【UniApp】-uni-app-打包成小程序2023-12-2823.『UniApp』uni-app-打包成App2023-12-30

收起

前言

• 好，经过上个章节的介绍完毕之后，了解了一下 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

javascript

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技术和一些个人的见解，谢谢大家的支持

• 前言
• 搭建演示环境
• 步入正题
•     全局数据
•         定义全局数据
•         获取全局数据
•         测试
• 总结
• 最后

__EOF__