Mobx Apl 全局数据共享

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

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， 创建 MobX 的 Store 实例

在项目根目录下新建store文件夹，并且新建 store.js 文件

-- 按需导入第三方包的方法observable, 
-- action import { observable, action } from 'mobx-miniprogram' 
-- 创建 Store实例对象,并将其导出 export const store = observable({ 
-- 数据字段 numA: 1, numB: 2, 
-- 计算属性 
-- 在计算属性的方法前，必须加 get修饰符，代表sum的值是只读的，无法进行修改 
-- 计算属性sum 依赖于numA和numB的值，因此sum函数的返回值就是最终的值 
-- get sum() 
-- { return this.numA + this.numB },
-- 定义actions方法, 用来修改 store中的数据
-- updateNum1: action(function (step)
-- { this.numA += step}),
-- updateNum2: action(function(step) 
-- { this.numB += step }) })

5，使用Store 中的成员

1，在页面中使用

-- 首先 导入第三方包，将数据绑定到页面
 import { createStoreBindings } from 'mobx-miniprogram-bindings' 
 -- 2.其次 在页面的js文件的头部区域导入容器的数据
 import { store } from '../../store/store' 
 -- 3. 绑定操作：将仓库的东西绑定到当前的页面中，在页面的js文件的Page方法中 
 Page({上面周期函数--监听页面的加载 onLoad: function() 
 { 调用createStoreBindings方法  
 参数1： 绑定给谁：当前页面this 
 参数2： 对象{ store(容器)， fields(数据)， actions(修改方法) 
 this.storeBindings = createStoreBindings(this, 
 {  映射容器的实例 store, 映射容器的数据字段 
-- fields: ['numA', 'numB', 'sum'], 
-- 映射容器修改的方法 actions: ['updateNum1'] }) },
-- 生命周期函数--监听页面的卸载 onUnload: function () { 
-- 使用this.storeBindings，得到调用createStoreBindings方法的返回值  
-- 调用destroyStoreBindings 方法，进行清理销毁的工作 
this.storeBindings.destroyStoreBindings() } 
})

1.2，组件的 wxml 文件

组件的 .wxml结构
 <view>{{numA}} + {{numB}} = {{sum}}</view> 
 <van-button type="primary" bindtap="btnHnadler2">numB+1</van-button>
 监听函数btnHandler1的代码
 页面的js文件中的 tap事件处理函数 
 btnHnadler1 (e) 
 { console.log(e) 使用仓库中的方法，并传递数据 
 this.updateNum1(100) }

2，在组件中使用

准备工作
新建组件文件夹以及组件文件 numbers 2. 全局注册这个组件
在 message 页面中使用子组件
组件的 js 文件
1. 按需导入容器成员 
2. 在组件的behaviors节点 实现自动绑定 
3. 在storeBindings节点指定要绑定的store和要绑定的数据以及方法 
4. import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' 
5. import { store } from '../../store/store'
6.  Component({ 通过storeBindingsBehavior 来实现自动绑定 
7. behaviors: [storeBindingsBehavior], 
8. storeBindings: { store, 指定要绑定的store fields: 
9. {  指定要绑定的数据字段或计算属性 numA: () => store.numA, 绑定字段的方式
10.  numB: store => store.numB, 
11. 绑定字段的方式2 sum: 'sum' 绑定字段的方式3 },
12. actions: { 指定要绑定的方法 updateNum2: 'updateNum2' } } })
13. 注意： fields中前面是在组件中的名称，可自定义，后面是容器中的名称，必须和仓库一致

组件的 wxml 文件
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHnadler2">numB+1</van-button>

事件处理函数 btnHandler2
Compoonent({ methods: { btnHnadler2(e) 
{ 直接使用this调用仓库中的方法 
this.updateNum2(20) } } 
})

*总结

**无论是在页面中使用仓库中的东西, 还是在组件中使用仓库中的东西, 
在绑定成功之后, 就可以像使用自身数据和调用自身方法一样的对仓库的数据和方法进行操作**