uni-app 实现全局变量

最新推荐文章于 2025-04-25 18:32:38 发布

杭杭爸爸

最新推荐文章于 2025-04-25 18:32:38 发布

阅读量2.4k

点赞数

分类专栏：小程序文章标签： javascript 前端开发语言

原文链接：http://www.javashuo.com/article/p-mgqazmhy-me.html

版权

小程序专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在uni-app中利用App.vue的globalData属性来定义全局变量，实现nvue和vue组件间的数据共享。通过定义和操作globalData，开发者可以在不同页面及组件之间传递和同步数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4、globalData

小程序中能够在 App 上声明全局变量，但在 Vue 中没有，uni-app 中在 App.vue 能够定义在 globalData 属性上，也能够使用 API 读写这个值。

这个方式支持vue和nvue共享数据。是目前nvue和vue共享数据的一种比较好的方式。

1，定义：App.vue 定义方法或变量

<script>  
export default {  
  globalData: {  
    text: 'text'  
  },  
  onLaunch: function() {  
    console.log('App Launch')  
  },  
  onShow: function() {  
    console.log('App Show')  
  },  
  onHide: function() {  
    console.log('App Hide')  
  }  
}  
</script>  

<style>  
  /*每一个页面公共css */  
</style>

2，页面中操做 globalData 的方式

赋值：

getApp().globalData.text = 'test'

取值：

console.log(getApp().globalData.text)

使用案例：

import app from "../../App.vue" ///这句比较重要可以尝试删除添加这句话
// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token变量
const install = (Vue, vm) => {
   // 此为自定义配置参数，具体参数见上方说明
   Vue.prototype.$u.http.setConfig({
       baseUrl: app.globalData.apiUrl,
       loadingText: 'loading...',
       loadingTime: 300,
       originalData: false, // 是否在拦截器中返回服务端的原始数据
       loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透

       // ......
   });