小程序有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> <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 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>