1. 定义：全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。而我们微信小程序常用的全局共享方案是：MobX
image.png
我们可以通过上面这张图清除的看到，如果不使用MobX全局数据共享的话，如果需要调用某个组件，则需要一层一层调用，如果定义了全局数据共享，那么可以直接拿到数据，不需要一层一层调用
2. 全局数据共享的具体方案
在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中：
mobx-miniprogram 用来 创建 Store 实例对象
mobx-miniprogram-bindings 用来 把 Store 中的共享数据或方法 ， 绑定到组件或页面中使用
3. 使用
安装npm包步骤：
执行命令：npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1-
MobX 相关的包安装完毕之后，然后通过如下图重新构建npm
image.png 构建npm报错，控制台执行命令：
npm init -y处理
4.创建store.js
1.在根目录中创建store文件夹，文件夹下创建store.js文件
2.store.js文件中引入mobx-miniprogram中的 observable、action
import {
observable,
action
} from 'mobx-miniprogram'
export const store = observable({
// 字段/数据
count1: 1,
count2: 2,
// 计算属性：用get定义，（只读不能修改）
get count_sum() {
return this.count1 + this.count2
},
// action方法：用来修改store中的值
updateCount1: action(function (step) {
this.count1 += step
})
})
页面中:使用store(
Page页面中)
1.使用store数据的页面（ .js 文件中）：
- 引入store.js文件
- 引入 mobx-miniprogram-bindings 中的
createStoreBindings方法(参数如下)，并将其挂在到 storeBindings 变量上(页面卸载的时候做清理使用) - 将方法绑定到 createStoreBindings 方法的fields与actions上
- 用 this.方法 / this.属性 调用
import { createStoreBindings } from "mobx-miniprogram-bindings"
import { store } from '../../store/store.js'
Page({
// 点击事件
addCount(e) {
// 获取传入值： e.target.dataset
this.updateCount1(e.target.dataset.addstep)
},
onLoad: function () {
this.storeBindings = createStoreBindings(this, {
store, // 数据源(将store中的某些字段、方法绑定到当前页面中)
fields: ['count1'], // 将哪些字段绑定到此页面中进行使用
actions: ['updateCount1'] // 将哪些方法绑定到此页面中
})
},
onUnload: function () {
this.storeBindings.destroyStoreBingds()
},
})
2.使用store数据的页面（ .wxml 文件中）：（操作效果：点击页面中’store_count +1‘按钮，store_count会与store_count_sum的值一起增加）
<!-- 获取 store 中共享数据 -->
<view>{{count1}} + {{count2}} = {{count_sum}}</view>
<!-- 绑定addCount方法，传入+=Num。
方法中：
1.在e.target.dataset中获取传入的数据。
2. 执行storeBindings变量 action中的 updateCount1方法，让store中的count1 +2
-->
<button bindtap="addCount" data-addStep='{{2}}'>count1 +1</button>
组件中:使用store(
Component组件中)
1.使用store数据的页面（ .js 文件中）：
- 引入store.js文件
- 引入 mobx-miniprogram-bindings 中的
storeBindingsBehavior方法(注意：与页面引入的方法不同) - 将 storeBindingsBehavior 绑定到behaviors上。( 通过 storeBindingsBehavior 来实现自动绑定 )
- 用 this.方法 / this.属性 调用。注意：调用名称都为(fields、actions)中
重新定义的名称，如：num1、count_sum、getSum等。【非store中定义的字段/方法名称】！！！没必要保持一致
import { storeBindingsBehavior } from "mobx-miniprogram-bindings"
import { store } from '../../store/store'
Component({
behaviors:[storeBindingsBehavior], // 通过 storeBindingsBehavior 来实现自动绑定
storeBindings:{
store,// 指定要绑定的 store
fields:{ // 指定要绑定的字段数据
count1:()=>store.count1, // 第一种写法(了解即可)
count2:(store)=>store.count2, // 第二种写法(了解即可)
count_sum:'count_sum' // 第三种写法(推荐精简)
},
actions:{ // 指定要绑定的方法
getSum:'updateCount1'// 结构：自己定义的名(随便起,合法就行) : store 中的方法
}
},
methods: {
addCount(){
this.getSum(8)//调用store中的方法。调用名称为当前页面重新定义的名称
}
}
})
2.使用store数据的页面（ .wxml 文件中）
<view>{{count1}} + {{count2}} = {{count_sum}} </view>
<van-button bindtap="addCount" >add +8 </van-button>
