uniapp之globalData(全局变量机制)

小程序有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声明周期里进行变量重赋值。