小程序全局数据共享MobX

1、全局数据共享

（又叫做:状态管理）是为了解决组件之间数据共享的问题。

开发中常用的全局数据共享方案有:Vuex、Redux、MobX等。

2、小程序中的全局数据共享方案

在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindings 实现全局数据共享

mobx-miniprogram用来创建Store 实例对象

mobx-miniprogram-bindings 用来把Store中的共享数据或方法，绑定到组件或页面中使用

3、安装MobX相关包

在项目中运行如下的命令，安装MobX相关的包
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
注意:MobX相关的包安装完毕之后，记得删除 miniprogram_npm目录后，重新构建npm

4、创建文件夹并引入包

在根目录下创建文件夹store，文件夹中创建store.js。引入 mobx-miniprogram 包、定义数据、计算属性sum要加get、然后通过actions 方法/函数， 专门来修改 Store 中数据的值

在根目录下创建文件夹store，文件夹中创建store.js
// 在这个js文件中、专门创建 Store 的实例对象
//需要按需导出 action 方法
import { observable, action } from "mobx-miniprogram";
export const store = observable({
	//数据字段
	numA: 1,
	numB: 2,
	//计算属性
	get sum(){
		return this.numA + this.numB
	},
	// actions 方法/函数， 专门来修改 Store 中数据的值
	updeteNum1:action(function(step){
		this.numA += step
	}),
	updeteNum2:action(function(step){
		this.numB += step
	})
})

5、将 Store 中的成员绑定到页面中

在onLoad 挂载自定义属性 ，在onUnload 通过this访问自定义属性所提供的方法destoryStoreBingings做清理工作防止内存泄漏

页面的 .js 文件导入需要的成员
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from "../../store/store";

onLoad(options) { //生命周期函数--监听页面加载
  createStoreBindings(this,{ // this代表当前的实例，今后要把数据绑定到页面上进行使用
    store,// 数据源，今后会把属性方法绑定到页面的实例上
    fields:['numA','numB','sum'],// 需要将那些字段绑定到页面上进行使用
    actions:['updeteNum1']// 需要将那些方法绑定到页面山
  })
},

onUnload() { //生命周期函数--监听页面卸载
  this.storeBindings.destoryStoreBingings()
},

js 文件
handler(e){
	console.log(e);
	this.updeteNum1(e.target.dataset.step)
},

在页面上使用Store中的成员
wxml 页面
<view>{{numA}}+{{numB}}+{{sum}}</view>
<button bindtap="handler" data-step="{{1}}">numA+1</button>
<button bindtap="handler"data-step="{{-1}}">numA-1</button>

6、将Store中的成员绑定到组件中

.js 组件文件
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings' // 通过storeBindingsBehavior桥梁映射到组件中进行使用
import {store} from '../../store/store'

Component({
  behaviors:[storeBindingsBehavior], // 通过 storeBindingsBehavior 实现自动绑定
  storeBindings:{ //配置对象
    store, // 指定要绑定的Store
    fields:{ // 指定要绑定的字段数据
      numA:() =>store.numA,      // 绑定字段的第1种方式
      numB:(store) =>store.numB, // 绑定字段的第2种方式
      sum:'sum'                  //绑定字段的第3种方式 sum字段指向的值就是store里面sum对应的值
    },
    actions:{
      npdateNum2:'npdateNum2'
    }
  },
})

methods: {
	header2(e){
		this.npdateNum2(e.target.dataset.step)
	}
}

wxml 组件页面使用Store中的成员
<view>{{numA}}+{{numB}}+{{sum}}</view>
<button bindtap="header2" data-step="{{1}}">+1</button>
<button bindtap="header2" data-step="{{-1}}">-1</button>