全局?jǐn)?shù)據(jù)共享，也叫做狀態(tài)管理，是為了解決組件/頁面之間的數(shù)據(jù)共享問題
開發(fā)中常用的數(shù)據(jù)共享方案有 Vuex、redux、MobX 等

小程序中的數(shù)據(jù)共享方案

使用 mobs-miniprogram 配合 mobs-miniprogram-bindings 實現(xiàn)數(shù)據(jù)共享

1. mobs-miniprogram 用來Store創(chuàng)建實例對象
2. mobs-miniprogram-bindings 用來把Store中的共享數(shù)據(jù)或者方法，綁定到組件或頁面中使用

安裝 MobX

1. 在項目對應(yīng)的目錄下，使用終端運行以下命令來安裝 MobX 對應(yīng)的包
   npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
2. 安裝完成之后，在小程序開發(fā)工具的 工具 - 構(gòu)建 npm
   構(gòu)建之前先刪除項目中 miniprogram_npm 文件夾，再選擇構(gòu)建 npm，否則會有構(gòu)建失敗的情況，當(dāng)然，新項目沒有生成 miniprogram_npm 文件夾的請忽略。

創(chuàng)建 Store 實例

1. 創(chuàng)建 Store 實例對象
   在項目根目錄下創(chuàng)建 store 文件夾，并在文件夾下創(chuàng)建 store.js 文件，在store.js 文件中創(chuàng)建 Store 實例對象
2. 定義屬性
   在store.js 文件中創(chuàng)建 Store 實例對象的具體代碼如下

import { observable } from 'mobx-miniprogram'
export const store = observable({
  // 數(shù)據(jù)字段
  num: 1,
  numF: 2,
  // 計算屬性
  get sum(){
    return this.num + this.numF
  }
})

• 數(shù)據(jù)字段
  以上代碼中，num、numF 等屬于數(shù)據(jù)字段，可以直接在其他頁面中使用
• 計算屬性
  以上代碼中，sum 是以方法的形式定義的計算屬性，get 表示當(dāng)前計算屬性的值是只讀類型

3. 定義方法
   定義了一個方法名為 updateNum 的方法來修改 num 的值，參數(shù)是由 action 包裹的方法，最終通過 function (step)方法修改內(nèi)部數(shù)據(jù)，具體代碼如下

import { observable, action } from 'mobx-miniprogram'
export const store = observable({
  // 數(shù)據(jù)字段
  num: 1,
  // 定義方法 可以修改 store 中的數(shù)據(jù)
  updateNum: action(function (step) {
    this.num += step
  })
})

頁面調(diào)用共享數(shù)據(jù)

使用共享數(shù)據(jù)在頁面對應(yīng)的 .js 文件中導(dǎo)入需要的內(nèi)容，然后在 .wxml 文件中直接使用對應(yīng)的數(shù)據(jù)

1. 導(dǎo)入步驟

• 導(dǎo)入需要的成員，這里導(dǎo)入了一個方法 createStoreBindings 和一個實例對象 store
• 在 onLoad 方法中實現(xiàn)綁定，通過配置對象將 store 中的字段、方法等和頁面的實例 this 進(jìn)行綁定，把返回值賦給 this.storeBindings，方便在后面使用
• 在 onUnload 方法中銷毀

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Page({
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ['num', 'numF', 'sum'],
      actions: ['updateNum']
    })
  },
  clickBtn(e) {
    // console.log(e);
    this.updateNum(e.target.dataset.step)
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload() {
    this.storeBindings.destoryStoreBindings()
  }
})

2. 使用
   在 .wxml 文件中直接使用

<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>

組件調(diào)用共享數(shù)據(jù)

組件中使用和頁面調(diào)用基本原理相同，在導(dǎo)入和綁定方式上稍有差異

import {
  storeBindingsBehavior
} from "mobx-miniprogram-bindings"
import store from "../../store/store"

Component({
  behaviors: [ storeBindingsBehavior ],
  storeBindings: {
    store,
    fields: [ 'num', 'numF' ],
    actions: [ 'updateNum' ]
  }，
  methods: {
    // 更新數(shù)據(jù) 自增加1
    autoIncrement() {
      this.updateNum(1)
    }
  }
})

.wxml 文件中需要顯示數(shù)據(jù)的位置直接使用即可

分模塊狀態(tài)管理

隨著項目功能模塊增多，一個 store 不好管理，可根據(jù)功能模塊劃分多個 store ，比如用戶信息、訂單信息、地址信息等

• userStore.js
• orderStore.js
• addressStore.js

頁面或組件中需要使用哪些 store 模塊的狀態(tài)，導(dǎo)入指定的 store 模塊，作為 store 字段傳遞給 createStoreBindings 或 storeBindingsBehavior

立即更新狀態(tài)

為了提升性能，在 store 中的字段被更新后，不會立刻同步到 this.data，如果需要立即更新

• 在組件中可以調(diào)用 this.updateStoreBindings()
• 在頁面中可以調(diào)用 this.storeBindings.updateStoreBindings()