uni-app全局变量的四种实现方式总结
一、公用模块
定义一个专用的模块，用来组织和管理这些全局的变量，在需要的页面引入
示例如下：
1.在 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
}2.在 pages/index/index.vue 中引用该模块
<script>
import helper from '../../common/helper.js';
export default {
data() {
return {};
},
onLoad(){
console.log('now:' + helper.now());
},
methods: {
}
}
</script>这种方式维护起来比较方便，但是缺点就是每次都需要引入。
二、Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
HBuilderX 2.2.5+起，支持vue和nvue之间共享
1.在 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 = '';
}
}
})2.在 main.js 挂载 Vuex
import store from './store' Vue.prototype.$store = store
3.在 pages/index/index.vue 使用
<script>
import {
mapState,
mapMutations
} from 'vuex';
export default {
computed: {
...mapState(['avatarUrl', 'login', 'userName'])
},
methods: {
...mapMutations(['logout'])
}
}
</script>示例操作步骤：
未登录时，提示去登录。跳转至登录页后，点击“登录”获取用户信息，同步更新状态后，返回到个人中心即可看到信息同步的结果。
注意：对比前面的方式，该方式更加适合处理全局的并且值会发生变化的情况。
三、挂载到Vue.prototype上
将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来。
注意这种方式只支持vue页面示例如下：
1.在 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;
};2.在 pages/index/index.vue 中调用
<script>
export default {
data() {
return {};
},
onLoad(){
console.log('now:' + this.now());
},
methods: {
}
}
</script>这种方式，只需要在 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是一种比较简单的全局变量使用方式。
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.js中操作globalData的方式如下：
赋值：getApp().globalData.text = 'test'
取值：console.log(getApp().globalData.text) // 'test'
如果需要把globalData的数据绑定到页面上，可在页面的onshow声明周期里进行变量重赋值。HBuilderX 2.0.3起，nvue页面在uni-app编译模式下，也支持onshow。
总结
到此这篇关于uni-app全局变量的四种实现方式的文章就介绍到这了,更多相关uni-app全局变量内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS简单实现禁止访问某个页面的方法,涉及基本的页面跳转操作技巧,需要的朋友可以参考下2016-09-09
本文主要对javascript中的JSON进行详细介绍。相信对于初学者具有很好的参考价值，下面就跟着小编一起来看下吧2016-12-12
深入理解JavaScript和TypeScript中的class
class 声明创建一个基于原型继承的具有给定名称的新类，下面这篇文章主要给大家介绍了关于JavaScript和TypeScript中class的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2018-04-04
这篇文章主要为大家详细介绍了微信小程序异步处理的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要为大家详细介绍了js阻止冒泡和默认事件，即默认行为,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
本文通过实例代码给大家介绍了js实现弹出框的拖拽效果，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
本文主要给大家详细总结了下javascript中的运算符，包括常见的算数运算符、比较运算符和逻辑运算符。十分的清晰，有需要的小伙伴可以参考下。2015-06-06
这篇文章主要为大家详细介绍了JavaScript实现更换头像功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了如何利用HTML、CSS 和 JavaScript 制作纸牌记忆游戏，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起动手尝试一下2022-04-04
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
这篇文章主要介绍了微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示的实现，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
最新评论