1. 定義：全局?jǐn)?shù)據(jù)共享（又叫做：狀態(tài)管理）是為了解決組件之間數(shù)據(jù)共享的問(wèn)題。開(kāi)發(fā)中常用的全局?jǐn)?shù)據(jù)共享方案有：Vuex环肘、Redux校套、MobX 等仁讨。而我們微信小程序常用的全局共享方案是：MobX
image.png
我們可以通過(guò)上面這張圖清除的看到，如果不使用MobX全局?jǐn)?shù)據(jù)共享的話灭袁，如果需要調(diào)用某個(gè)組件猬错，則需要一層一層調(diào)用，如果定義了全局?jǐn)?shù)據(jù)共享茸歧，那么可以直接拿到數(shù)據(jù)倦炒，不需要一層一層調(diào)用
2. 全局?jǐn)?shù)據(jù)共享的具體方案
在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 實(shí)現(xiàn)全局?jǐn)?shù)據(jù)共享软瞎。其中：
mobx-miniprogram 用來(lái) 創(chuàng)建 Store 實(shí)例對(duì)象
mobx-miniprogram-bindings 用來(lái) 把 Store 中的共享數(shù)據(jù)或方法 析校， 綁定到組件或頁(yè)面中使用
3. 使用
安裝npm包步驟：
執(zhí)行命令：npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1-
MobX 相關(guān)的包安裝完畢之后，然后通過(guò)如下圖重新構(gòu)建npm
image.png 構(gòu)建npm報(bào)錯(cuò)铜涉，控制臺(tái)執(zhí)行命令：
npm init -y處理
4.創(chuàng)建store.js
1.在根目錄中創(chuàng)建store文件夾智玻，文件夾下創(chuàng)建store.js文件
2.store.js文件中引入mobx-miniprogram中的 observable、action
import {
observable,
action
} from 'mobx-miniprogram'
export const store = observable({
// 字段/數(shù)據(jù)
count1: 1,
count2: 2,
// 計(jì)算屬性：用get定義芙代，（只讀不能修改）
get count_sum() {
return this.count1 + this.count2
},
// action方法：用來(lái)修改store中的值
updateCount1: action(function (step) {
this.count1 += step
})
})
頁(yè)面中:使用store(
Page頁(yè)面中)
1.使用store數(shù)據(jù)的頁(yè)面（ .js 文件中）：
- 引入store.js文件
- 引入 mobx-miniprogram-bindings 中的
createStoreBindings方法(參數(shù)如下)吊奢，并將其掛在到 storeBindings 變量上(頁(yè)面卸載的時(shí)候做清理使用) - 將方法綁定到 createStoreBindings 方法的fields與actions上
- 用 this.方法 / this.屬性 調(diào)用
import { createStoreBindings } from "mobx-miniprogram-bindings"
import { store } from '../../store/store.js'
Page({
// 點(diǎn)擊事件
addCount(e) {
// 獲取傳入值： e.target.dataset
this.updateCount1(e.target.dataset.addstep)
},
onLoad: function () {
this.storeBindings = createStoreBindings(this, {
store, // 數(shù)據(jù)源(將store中的某些字段、方法綁定到當(dāng)前頁(yè)面中)
fields: ['count1'], // 將哪些字段綁定到此頁(yè)面中進(jìn)行使用
actions: ['updateCount1'] // 將哪些方法綁定到此頁(yè)面中
})
},
onUnload: function () {
this.storeBindings.destroyStoreBingds()
},
})
2.使用store數(shù)據(jù)的頁(yè)面（ .wxml 文件中）：（操作效果：點(diǎn)擊頁(yè)面中’store_count +1‘按鈕纹烹，store_count會(huì)與store_count_sum的值一起增加）
<!-- 獲取 store 中共享數(shù)據(jù) -->
<view>{{count1}} + {{count2}} = {{count_sum}}</view>
<!-- 綁定addCount方法页滚，傳入+=Num。
方法中：
1.在e.target.dataset中獲取傳入的數(shù)據(jù)铺呵。
2. 執(zhí)行storeBindings變量 action中的 updateCount1方法裹驰，讓store中的count1 +2
-->
<button bindtap="addCount" data-addStep='{{2}}'>count1 +1</button>
組件中:使用store(
Component組件中)
1.使用store數(shù)據(jù)的頁(yè)面（ .js 文件中）：
- 引入store.js文件
- 引入 mobx-miniprogram-bindings 中的
storeBindingsBehavior方法(注意：與頁(yè)面引入的方法不同) - 將 storeBindingsBehavior 綁定到behaviors上。( 通過(guò) storeBindingsBehavior 來(lái)實(shí)現(xiàn)自動(dòng)綁定 )
- 用 this.方法 / this.屬性 調(diào)用片挂。注意：調(diào)用名稱都為(fields幻林、actions)中
重新定義的名稱贞盯，如：num1、count_sum沪饺、getSum等躏敢。【非store中定義的字段/方法名稱】Ｕ稀＜唷！沒(méi)必要保持一致
import { storeBindingsBehavior } from "mobx-miniprogram-bindings"
import { store } from '../../store/store'
Component({
behaviors:[storeBindingsBehavior], // 通過(guò) storeBindingsBehavior 來(lái)實(shí)現(xiàn)自動(dòng)綁定
storeBindings:{
store,// 指定要綁定的 store
fields:{ // 指定要綁定的字段數(shù)據(jù)
count1:()=>store.count1, // 第一種寫(xiě)法(了解即可)
count2:(store)=>store.count2, // 第二種寫(xiě)法(了解即可)
count_sum:'count_sum' // 第三種寫(xiě)法(推薦精簡(jiǎn))
},
actions:{ // 指定要綁定的方法
getSum:'updateCount1'// 結(jié)構(gòu)：自己定義的名(隨便起,合法就行) : store 中的方法
}
},
methods: {
addCount(){
this.getSum(8)//調(diào)用store中的方法遭居。調(diào)用名稱為當(dāng)前頁(yè)面重新定義的名稱
}
}
})
2.使用store數(shù)據(jù)的頁(yè)面（ .wxml 文件中）
<view>{{count1}} + {{count2}} = {{count_sum}} </view>
<van-button bindtap="addCount" >add +8 </van-button>
