小程序全局数据共享

全局数据共享

下包

**npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings**

`mobx-miniprogram主要是来创建一个store实例`

mobx-miniprogram-bindings主要将store中共享出来的数据或方法.绑定到组件或页面使用

创建store实例

```
//根目录下创建文件夹store/store.js
import {deservable action} from 'mobx-miniprogram'
export const store = deservable({
    //数据字段
    num1:10,
    num2:20,
    //计算属性
    get sum(){
    return this.num1+this.num2
    },
    //actions用于修改store中的数据
    updateNum1:action(function(step){
        this.num1 += step
    })
})
```

将store中的数据或方法绑定到页面中

```
//在页面的js文件中
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Page({
    onload(){
        this.storeBindings = createStoreBindings(this,{
            store,
            //共享出数据
            fields:['num1','num2','sum']
            actions:['updateNum1']
        })
    },
    onUnload(){
        //销毁store
        this.storeBindings.destoryStoreBindings()
    }
})
```

将store中的数据在页面中使用

```
//在页面的wxml文件中 
//使用:可以直接使用插槽进行使用
<view> {{num}}+{{num2}}={{sum}} </view>
<van-button bindtap="numComputer" data-step="{{5}}" type="info">num1+5</van-button>
<van-button bindtap="numComputer" data-step="{{-3}}"  type="info">num1-3</van-button>
//在页面的js文件中
//修改:需要调用actions中的函数进行修改
numComputer(e){
    this.updateNum1(e.target.dataset.step)
}
```

将store中的数据方法绑定在组件中

```
//在组件js文件中
import {store} from '../../store/store'
import {storeBindingsBehavior} from 'miniprogram-mobx-bindings'
Component({
    behaviors:[storeBindingsBehavior],
    storeBindings : {
        store,
        field:{
            num1:()=>store.num1,
            num2:(store) =>store.num2
            sum:'sum'
        },
        actions:{
            updateNum2:'updateNum2'
        }
    }
})
```

将store中的数据在组件中使用

与在页面中使用方法一致

工具人,工具魂