全局数据共享之全局仓库的搭建，并且和相应页面建立联系

前面的内容 讲了全局数据共享所需要用到的包的安装，下面从包中导入所需要的方法！

这里需要从包 mobx-miniprogram中导入方法observable  ,然后在用这个方法创建一个实例对象来存储全局共享的数据!下图中的numA  numB

其次全局共享数据的改变只能通过action函数来进行修改，于是又得从包mobx-miniprogram中导入action这个方法

将仓库store中的成员绑定到页面中，需要从包mobx-miniprogram-bindings中导入方法creatStoreBindings

以下实现的两点    1.建立全局仓库    2.将这个仓库和相应的页面绑定！

建立起一个存储全局数据的一个仓库

这个仓库一定最好是单独创建的一个文件夹，比如下列的store文件夹，

建立store这个仓库，把这行代码放到store.js文件中去！

import{observable,action} from 'mobx-miniprogram'
 export const store = observable({
   numA: 1 ,
   numB: 3 ,
   get sum(){
     return this.numA + this.numB
   },
  updataNum1: action(function (step) {
     this.numA += step
    }),
  updataNum2: action(function (step) {
    this.numB += step
  })
})

这里要特意的创建了store文件夹，并在其中创建了store.js这个文件

将全局数据共享的仓库和相应的页面建立起联系！

在页面的.js文件中输入以下代码！！！
import { createStoreBings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

pages({
        onload: function(){ 
                  
             this.storeBindings = createStoreBindings(this,{
                                                        store,
                                                        fields: ['numA','numB','sum'],
                                                        actions: ['updateNum1']
                                                      })
                        }
        onUnload: function(){
              this.storeBindings.destroyStoreBindings()
                                }

将全局数据共享仓库和自定义组件关联起来！

在自定义组件.js中输入下面代码
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import { store } from '../../store/index'

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings:{
    store,
    fields:{
      numA:'numA',
      
    },
    actions: {
      hanshu:'updataNum1'
    }

                 }


  })

在自定义组件的 .js文件中输入下图的代码，然后在参考前面自定义组件的文章，在page页面下调用自定义组件！！！