After the initial value in WeChat Mini Programs's app.js is changed, how does the index.js of calling the value in globalData update the corresponding value immediately?

problem description

here are the global parameters in the info.js call app.js

clipboard.png

app.jsrole

clipboard.png

info successfully prints out role=null; after loading for the first time. Then I call a method app.js in info.js and change the parameter of role value in app.js = "EMP";
I think the role=null; defined by data in info.js is also =" EMP";

at this time.

the environmental background of the problems and what methods you have tried

I can"t figure out how to do it,

related codes

/ / Please paste the code text below (do not replace the code with pictures)
info.js code

const app = getApp()
Page({
  data: {
    role:undefined,
  },
  onLoad: function() {
    let that = this;
    that.setData({
      role:app.globalData.role
    })
  },
  onReady: function () {
    console.log(this.data.role)//role=null
    app.getRole()
    console.log(this.data.role)//role=null,role="EMP"
  },
})

app.js

App({
  globalData: { //
    role:"null",
  },
  getRole:function(){
    let that = this;
    that.globalData.role = "EMP";
    console.log(that.globalData.role)//="EMP"
  }
})

what result do you expect? What is the error message actually seen?

some people say that they use Promise, but they don"t know how to write it, and whether they can list it.

Oct.14,2021

this is not automatically updated. You can do something to change the value in Page.data when the value is changed, such as writing a callback:

App({
  globalData: { //
    role:'null',
  },
  getRole:function(callback){
    let that = this;
    that.globalData.role = 'EMP';
    console.log(that.globalData.role)//='EMP'
    if(callback){
        callback(that.globalData.role);
    }
  }
})

Page:

const app = getApp()
Page({
  data: {
    role:undefined,
  },
  onLoad: function() {
    let that = this;
    that.setData({
      role:app.globalData.role
    })
  },
  onReady: function () {
    let that = this;
    console.log(that.data.role)//role=null
    app.getRole(function(role){
        that.setData({
            role:role
        });
        console.log(that.data.role)//role='EMP'
    })
  },
})

is globalData the kind that is updated in real time? you need to get it again after you change it

.
data: {
    role: undefined,
  },
  onLoad: function () {
  },
  onReady: function () {
    console.log(this.role)//role=null
    app.getRole()
    this.setData({
      role: app.globalData.role
    })
    console.log(this.data.role)//role=null,role='EMP'
  },
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b41054-2c563.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b41054-2c563.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?