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