uni-app实现全局变量的方式小结

更新时间：2024年12月10日 08:55:24 作者：Microi风闲

uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到 iOS、Android、Web（响应式）、以及各种小程序,下面我们就来看看uni-app实现全局变量有哪些方法吧

一、uni-app介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app 在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

二、功能框架图

从下面 uni-app 功能框架图可看出， uni-app 在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

三、公用模块

定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入。

注意这种方式只支持多个vue页面或多个nvue页面之间公用，vue和nvue之间不公用。

示例如下：

在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 helper.js 用于定义公用的方法。

const websiteUrl = 'http://uniapp.dcloud.io';  
const now = Date.now || function () {  
    return new Date().getTime();  
};  
const isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};  
 
export default {  
    websiteUrl,  
    now,  
    isArray  
}

接下来在 pages/index/index.vue 中引用该模块

    import helper from '../../common/helper.js';  
 
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log('now:' + helper.now());  
        },  
        methods: {  
        }  
    }

这种方式维护起来比较方便，但是缺点就是每次都需要引入。

四、挂载 Vue.prototype

将一些使用频率较高常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会 “继承” 下来。

注意这种方式只支持 vue 页面

示例如下：

在 main.js 中挂载属性/方法

Vue.prototype.websiteUrl = 'http://uniapp.dcloud.io';  
Vue.prototype.now = Date.now || function () {  
    return new Date().getTime();  
};  
Vue.prototype.isArray = Array.isArray || function (obj) {  
    return obj instanceof Array;  
};

然后在 pages/index/index.vue 中调用

    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log('now:' + this.now());  
        },  
        methods: {  
        }  
    }

这种方式，只需要在 main.js 中定义好即可在每个页面中直接调用。

Tips

每个页面中不要在出现重复的属性或方法名。
建议在 Vue.prototype 上挂载的属性或方法，可以加一个统一的前缀。比如 $url、global_url 这样，在阅读代码时也容易与当前页面的内容区分开。

五、globalData

小程序中有个 globalData 概念，可以在 App 上声明全局变量。 Vue 之前是没有这类概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平台都实现了。

在 App.vue 可以定义 globalData ，也可以使用 API 读写这个值。

globalData 支持 vue 和 nvue 共享数据。
globalData 是一种比较简单的全局变量使用方式。

定义：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>

js中操作 globalData 的方式如下：

赋值：getApp().globalData.text = 'test'
取值：console.log(getApp().globalData.text) // 'test'

如果需要把 globalData 的数据绑定到页面上，可在页面的 onshow 声明周期里进行变量重赋值。HBuilderX 2.0.3起，nvue页面在 uni-app 编译模式下，也支持 onshow 。

六、Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

HBuilderX 2.2.5+起，支持vue和nvue之间共享。参考

这里以登录后同步更新用户信息为例，简单说明下 Vuex 的用法，更多更详细的 Vuex 的内容，建议前往其官网 Vuex 学习下。

举例说明：

在 uni-app 项目根目录下新建 store 目录，在 store 目录下创建 index.js 定义状态值

const store = new Vuex.Store({  
    state: {  
        login: false,  
        token: '',  
        avatarUrl: '',  
        userName: ''  
    },  
    mutations: {  
        login(state, provider) {  
            console.log(state)  
            console.log(provider)  
            state.login = true;  
            state.token = provider.token;  
            state.userName = provider.userName;  
            state.avatarUrl = provider.avatarUrl;  
        },  
        logout(state) {  
            state.login = false;  
            state.token = '';  
            state.userName = '';  
            state.avatarUrl = '';  
        }  
    }  
})

然后，需要在 main.js 挂载 Vuex

    import {  
        mapState,  
        mapMutations  
    } from 'vuex';  
 
    export default {  
        computed: {  
            ...mapState(['avatarUrl', 'login', 'userName'])  
        },  
        methods: {  
            ...mapMutations(['logout'])  
        }  
    }

示例操作步骤：

未登录时，提示去登录。跳转至登录页后，点击“登录”获取用户信息，同步更新状态后，返回到个人中心即可看到信息同步的结果。

注意：对比前面的方式，该方式更加适合处理全局的并且值会发生变化的情况。

七、注意事项

.vue 和 .nvue 并不是一个规范，因此一些在 .vue 中适用的方案并不适用于 .nvue。 Vue 上挂载属性，不能在 .nvue 中使用。

到此这篇关于uni-app实现全局变量的方式小结的文章就介绍到这了,更多相关uni-app全局变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

二级域名或跨域共享Cookies的实现方法
适用于Asp。在主域名设置的Cookie，在各子域名共用；适用于博客等提供二级域名。这个问题，以网上有众多帖子，可惜都没有完整解决。
2008-08-08
微信小程序如何获取图片宽度与高度
这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
通过js简单实现将一个文本内容转译成加密文本
将文本内容转译成加密文本，在某些情况下还是比较实用的，下面通过js简单实现下，感兴趣的朋友不要错过
2013-10-10
JavaScript中数组去除重复的三种方法
本文通过三种方法给大家介绍js数组去除重复的方法，实用性非常高，感兴趣的朋友一起学习吧
2016-04-04
js实现图片懒加载效果
这篇文章主要为大家详细介绍了js实现图片懒加载效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
微信小程序登录获取不到头像和昵称的详细解决办法
相信好多小伙伴在使用getUserInfo获取小程序用户昵称和头像时却获取不到,下面这篇文章主要给大家介绍了关于微信小程序登录获取不到头像和昵称的详细解决办法,需要的朋友可以参考下
2022-12-12
js 显示日期时间的实例(时间过一秒加1)
下面小编就为大家带来一篇js 显示日期时间的实例(时间过一秒加1)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
怎么引入(调用)一个JS文件
这篇文章主要介绍了引入(调用)一个JS文的方法，非常不错介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-05-05
微信jssdk用法汇总
这篇文章主要针对微信jssdk用法进行汇总，通过ready接口处理成功验证、通过error接口处理失败验证等内容介绍，感兴趣的小伙伴们可以参考一下
2016-07-07
浅析js中的every()对空数组总返回true
JavaScript 语言的核心部分足够大,以至于我们很容易误解其某些部分的工作方式,本文就来和大家一起讨论下为什么JS中的 every()对空数组总返回 true,需要的可以参考下
2023-09-09