小程序有globalData机制，这套机制在uni-app里也可以使用，全端通用。
在App.vue文件里定义globalData（也可以使用 API 读写这个值），然后可在globalData中定义全局变量。
优点：globalData 是一种比较简单的全局变量使用方式。globalData 支持 vue 和 nvue 共享数据。
示例一：
- 在 App.vue 中声明全局变量
<script>
export default {
globalData: {
name: 'liy'
},
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
/*每个页面公共css */
</style>
- 为全局变量赋值
getApp().globalData.name= 'yang'//赋值
- 获取全局变量的值
console.log(getApp().globalData.name) //取值
js中操作globalData的方式如下：
- 赋值：getApp().globalData.name= 'liy'
- 取值：console.log(getApp().globalData.name) // 'liy'
备注：在应用onLaunch时，getApp对象还未获取，暂时可以使用this.$scope.globalData获取globalData。
示例二：
- App.vue 中定义全局变量
<script>
export default {
globalData:{
processList:[]
},
onLaunch: function() {
console.log('App Launch');
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
</style>
- home.vue 中为全局变量赋值
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-btn-v">
<button @tap="JumpToNewPage">跳转新页面，并传递数据集合</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '主页',
processList:[
{
"process_id": "5",
"process_name": "卷下盘"
},
{
"process_id": "3",
"process_name": "接后片"
},
{
"process_id": "6",
"process_name": "接前片"
},
{
"process_id": "7",
"process_name": "水洗标"
},
{
"process_id": "8",
"process_name": "钉扣"
},
{
"process_id": "1",
"process_name": "贴口袋"
},
{
"process_id": "2",
"process_name": "做袖叉"
},
{
"process_id": "3",
"process_name": "做袖英"
},
{
"process_id": "4",
"process_name": "缝衣领"
}
]
}
},
methods: {
JumpToNewPage:function(){
console.log("JumpToNewPage-processList1:" + JSON.stringify(this.processList));
/* var processList = JSON.stringify(this.processList);
uni.navigateTo({
url: 'new-page2/new-page2?processList=' + processList
}); */
getApp().globalData.processList = this.processList;//赋值
uni.navigateTo({
url: 'new-page2/new-page2?'
});
},
}
}
</script>
<style>
</style>
- new-page2.vue 中获取全局变量
<template>
<view>
<view v-for="(item,index) in processList" :key="index">
{{item.process_name}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
processList:[]
}
},
onLoad(options){
// if(options.processList){
// console.log("onLoad-processList2:" + options.processList);
// // this.processList = options.processList;
// // console.log("onLoad-processList3:" + this.processList);
// this.processList = JSON.parse(options.processList);
// console.log("onLoad-processList3:" + JSON.stringify(this.processList));
// }
this.processList = getApp().globalData.processList;//取值
console.log("onLoad-processList2:" + JSON.stringify(this.processList));
}
}
</script>
<style>
</style>
如果需要把 globalData 的数据绑定到页面上，可在页面的onShow声明周期里进行变量重赋值。
