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>
            <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>