A brief discussion on the small program globalData

I dug frozen soil in the severe winter, I leaped in the dark trenches, I protected the stone slabs of the house with my life, and I slept under the ruins that smelled scorched earth.

In the applet, in addition to each page having its own data, there is also a global data storage place: globalData. The acquisition method is as follows:

let globalData = getApp().globalData

This situation will always be encountered in actual business code: as I write, I find that global data is needed, but I cannot directly write the above code in the current function. Because it needs to be shared with other functions, I will add a piece of code at the top of the js file, and then return to the place I just broke and continue writing, similar to this:

// 12 lines omittedlet globalData = getApp().globalData
// 15 lines omittedPage({
 data: { ... }
 //.. 863 lines omitted onButtonTap(e) {
  // ...
  let myData = 
  // ...
 }
})

After such a struggle, the code ideas I just now may have disappeared. So can you directly and conveniently obtain this globalData in the function you want to use? for example:

// 27 lines omittedPage({
 data: { ... }
 //.. 863 lines omitted onButtonTap(e) {
  // ...
  let myData = 
  // ...
 }
})

Or get and set myData in another way:

let myData = this.$global('myData')
// ...
this.$global('myData', 2)

Implement global methods

function global(name, value) {
 var globalData = getApp().globalData
 var data = {}
 // this.$global()
 if ( === 0) {
  return globalData
 }
 // this.$global('myData')
 if ( === 1) {
  if ((name)) {
   return globalData[name]
  }
  // this.$global({
  //  name: 1
  // })
  if ((name)) {
   data = name
  }
 }
 // this.$global('myData', 2)
 if ( === 2) {
  data[name] = value
 }
 return extend(data, data)
}

Among them, and is a type judgment function. A variety of methods for operating globalData are simply implemented, see the comments for details.

Mount to this

If you have a function, how can you hang it in this on the mini program page? After reading the previous articles, you may know that you need to transform the original Page function of the mini program.

There are two ways, one is to directly add it to the config:

var originPage = Page
var global = require('../utils/global')

function MyPage(config) {
 // ...
 config.$global = global
 // ...
 originPage(config)
}

function page (config) {
 return new MyPage(config)
}

Or define it in the onLoad function after the proxy:

var originPage = Page
var global = require('../utils/global')

function MyPage(config) {
  = 
  = {
  onLoad: 
 }
  = function(options) {
  this.$global = global
  // Other codes  (this, options)
 }
 
 // ...

 originPage(config)
}

Summarize

Using this method, many common methods of mini-program pages can be defined, such as encapsulating this.$util, this.$navigate and other tools suitable for their own business within the Mobike mini-program.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.