Mini Program - Global Data Sharing

1. What is global data sharing

Global data sharing (also known as: state management) is to solve the problem of data sharing between components.Common global data sharing schemes in development include: Vuex, Redux, Mobx, etc.

2. Global data sharing scheme in applet

You can use mobx-miniprogram with mobx-miniprogram-bindings to achieve global data sharing.of which

• modx-miniprogram is used to create a Store instance object
• mobx-miniprogram-bindings are used to Bind the shared data or methods in the Store to components or pages for use

3. Install Mobx package

Note: After installing Mobx-related packages, remember to delete the miniprogram-npm directory and re-build npm

4. Create Mobx Store instance

//In this js file, it is specially used to create an instance object of Storeimport {observable} from 'mobx-miniprogram'export const store = observable({//data fieldnumA:1,numB:2,//computed propertygetsum(){return this.numA+this.numB},//actions method, used to modify the data in the storeupdataNum1:action(function (step){ this.numA += step}),updataNum2:action(function (step){ this.numB += step}),})

5. Bind the members in the store to the page

//Page jsimport { createStoreBindings } from 'mobx-miniprogram-bindings'import { store } from '../../store/store'onLoad: function (options) {this.storeBindings = createStoreBindings(this,{store,//data sourcefields:['numA','numB','sum'],actions:['updateNum1']})},onUnload: function () {//Uninstall this storethis.storeBindings.destroyStoreBindings()},

//Page wxml{{numA}}+{{numB}} = {{sum}}numA+1numA-1//page jsbtnHandler1(e){// console. log(e)this.updateNum1(e.target.dataset.step)},

6. Bind the store member to the component

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'import { store } from '../../store/store'Component({/*** Component property list*/behaviors:[storeBindingsBehavior],//Automatic binding through storeBindingsBehavior//I don't know where storeBindings came fromstoreBindings:{store,fields:{//fields cannot be written incorrectly, otherwise it will not rendernumA:()=>store.numA,//The first way to bindnumB:(store)=>store.numB,//The second way of bindingSum:'sum'//The third way of binding},actions:{updateNum2:'updateNum2'}},})

Using members from Store in components

//Group price.wxml structure{{numA}}+{{numB}}={{sum}}numB+1numB-1//List of methods of the componentmethods: {btnHandler2(e){this.updateNum2(e.target.dataset.step)}}