全局数据共享，也叫做状态管理，是为相识决组件/页面之间的数据共享标题
开辟中常用的数据共享方案有 Vuex、redux、MobX 等
小步伐中的数据共享方案
利用 mobs-miniprogram 配合 mobs-miniprogram-bindings 实现数据共享
- mobs-miniprogram 用来Store创建实例对象
- mobs-miniprogram-bindings 用来把Store中的共享数据大概方法，绑定到组件或页面中利用
安装 MobX
- 在项目对应的目次下，利用终端运行以下命令来安装 MobX 对应的包
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
- 安装完成之后，在小步伐开辟工具的 工具 - 构建 npm
构建之前先删除项目中 miniprogram_npm 文件夹，再选择构建 npm，否则会有构建失败的环境，固然，新项目没有天生 miniprogram_npm 文件夹的请忽略。
创建 Store 实例
- 创建 Store 实例对象
在项目根目次下创建 store 文件夹，并在文件夹下创建 store.js 文件，在store.js 文件中创建 Store 实例对象
- 界说属性
在store.js 文件中创建 Store 实例对象的详细代码如下
import { observable } from 'mobx-miniprogram'export const store = observable({ // 数据字段 num: 1, numF: 2, // 盘算属性 get sum(){ return this.num + this.numF }})
- 数据字段
以上代码中，num、numF 等属于数据字段，可以直接在其他页面中利用
- 盘算属性
以上代码中，sum 是以方法的情势界说的盘算属性，get 体现当前盘算属性的值是只读类型
- 界说方法
界说了一个方法名为 updateNum 的方法来修改 num 的值，参数是由 action 包裹的方法，终极通过 function (step)方法修改内部数据，详细代码如下
import { observable, action } from 'mobx-miniprogram'export const store = observable({ // 数据字段 num: 1, // 界说方法 可以修改 store 中的数据 updateNum: action(function (step) { this.num += step })})页面调用共享数据
利用共享数据在页面临应的 .js 文件中导入需要的内容，然后在 .wxml 文件中直接利用对应的数据
- 导入需要的成员，这里导入了一个方法 createStoreBindings 和一个实例对象 store
- 在 onLoad 方法中实现绑定，通过设置对象将 store 中的字段、方法等和页面的实例 this 举行绑定，把返回值赋给 this.storeBindings，方便在反面利用
- 在 onUnload 方法中烧毁
import { createStoreBindings } from 'mobx-miniprogram-bindings'import { store } from '../../store/store'Page({ /** * 生命周期函数--监听页面加载 */ onLoad(options) { this.storeBindings = createStoreBindings(this, { store, fields: ['num', 'numF', 'sum'], actions: ['updateNum'] }) }, clickBtn(e) { // console.log(e); this.updateNum(e.target.dataset.step) }, /** * 生命周期函数--监听页面卸载 */ onUnload() { this.storeBindings.destoryStoreBindings() }})<view> 盘算公式：{{num}} + {{numF}} = {{sum}} </view><van-button type="primary" bindtap="clickBtn" data-step="{{1}}"> +1 按钮</van-button><view></view><van-button type="danger" bindtap="clickBtn" data-step="{{-1}}"> -1 按钮</van-button>组件调用共享数据
组件中利用和页面调用根本原理雷同，在导入和绑定方式上稍有差别
import { storeBindingsBehavior} from "mobx-miniprogram-bindings"import store from "../../store/store"Component({ behaviors: [ storeBindingsBehavior ], storeBindings: { store, fields: [ 'num', 'numF' ], actions: [ 'updateNum' ] }， methods: { // 更新数据 自增长1 autoIncrement() { this.updateNum(1) } }}).wxml 文件中需要体现数据的位置直接利用即可
分模块状态管理
随着项目功能模块增多，一个 store 欠好管理，可根据功能模块分别多个 store ，比如用户信息、订单信息、地点信息等
- userStore.js
- orderStore.js
- addressStore.js
页面或组件中需要利用哪些 store 模块的状态，导入指定的 store 模块，作为 store 字段转达给 createStoreBindings 或 storeBindingsBehavior
立即更新状态
为了提升性能，在 store 中的字段被更新后，不会立即同步到 this.data，如果需要立即更新
- 在组件中可以调用 this.updateStoreBindings()
- 在页面中可以调用 this.storeBindings.updateStoreBindings()
|
