一、簡介

在小程序中，常常有些數(shù)據(jù)需要在幾個(gè)頁面或組件中共享。使用?MobX?來管理小程序的跨頁面數(shù)據(jù),? 其實(shí)類似于vuex的store。

小程序的 MobX 綁定輔助庫。

此 behavior 依賴開發(fā)者工具的 npm 構(gòu)建。具體詳情可查閱 官方 npm 文檔 。

可配合 MobX 的小程序構(gòu)建版 npm 模塊 mobx-miniprogram 使用。

?更為詳細(xì)的說明和指引，可點(diǎn)擊項(xiàng)目地址。

?

二、使用方法?

需要小程序基礎(chǔ)庫版本 >= 2.2.3 的環(huán)境。

可以直接參考這個(gè)代碼片段（在微信開發(fā)者工具中打開）： https://developers.weixin.qq.com/s/nGvWJ2mL7et0

1、安裝 mobx-miniprogram 和 mobx-miniprogram-bindings?

npm install --save mobx-miniprogram mobx-miniprogram-bindings

2.、創(chuàng)建 MobX Store

// store.js
import { observable, action } from "mobx-miniprogram";

export const store = observable({
  // 數(shù)據(jù)字段
  numA: 1,
  numB: 2,

  // 計(jì)算屬性
  get sum() {
    return this.numA + this.numB;
  },

  // actions
  update: action(function () {
    const sum = this.sum;
    this.numA = this.numB;
    this.numB = sum;
  }),
});

3、在 Component 構(gòu)造器中使用

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

Component({
  behaviors: [storeBindingsBehavior],
  data: {
    someData: "...",
  },
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: "sum",
    },
    actions: {
      buttonTap: "update",
    },
  },
  methods: {
    myMethod() {
      this.data.sum; // 來自于 MobX store 的字段
    },
  },
});

4、在 Page 構(gòu)造器中使用

如果小程序基礎(chǔ)庫版本在 2.9.2 以上，可以直接像上面 Component 構(gòu)造器那樣引入 behaviors 。

如果需要比較好的兼容性，可以使用下面這種方式（或者直接改用 Component 構(gòu)造器來創(chuàng)建頁面）。

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

Page({
  data: {
    someData: "...",
  },
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ["numA", "numB", "sum"],
      actions: ["update"],
    });
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
  myMethod() {
    this.data.sum; // 來自于 MobX store 的字段
  },
});

三、Typescript 支持

從 2.1.2 版本開始提供了簡單的 TypeScript 支持。

新增兩個(gè)構(gòu)造器 API，推薦優(yōu)先使用下列新版接口，你也可以繼續(xù)使用舊版接口，詳見接口說明。

1、ComponentWithStore

import { ComponentWithStore } from "mobx-miniprogram-binding";
ComponentWithStore({
  options: {
    styleIsolation: "shared",
  },
  data: {
    someData: "...",
  },
  storeBindings: {
    store,
    fields: ["numA", "numB", "sum"],
    actions: {
      buttonTap: "update",
    },
  },
});

2、BehaviorWithStore

import { BehaviorWithStore } from "mobx-miniprogram-binding";
export const testBehavior = BehaviorWithStore({
  storeBindings: {
    store,
    fields: ["numA", "numB", "sum"],
    actions: ["update"],
  },
});

四、接口

將頁面、自定義組件和 store 綁定有兩種方式： behavior 綁定 和 手工綁定 。

1、behavior 綁定

behavior 綁定 適用于 Component 構(gòu)造器。做法：使用 storeBindingsBehavior 這個(gè) behavior 和 storeBindings 定義段。

注意：你可以用 Component 構(gòu)造器構(gòu)造頁面， 參考文檔 。

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    /* 綁定配置（見下文） */
  },
});

也可以把 storeBindings 設(shè)置為一個(gè)數(shù)組，這樣可以同時(shí)綁定多個(gè) store ：

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [
    {
      /* 綁定配置 1 */
    },
    {
      /* 綁定配置 2 */
    },
  ],
});

2、手工綁定

手工綁定 適用于全部場景。

做法：使用 createStoreBindings 創(chuàng)建綁定，它會(huì)返回一個(gè)包含清理函數(shù)的對(duì)象用于取消綁定。

注意：在頁面 onUnload （自定義組件 detached ）時(shí)一定要調(diào)用清理函數(shù)，否則將導(dǎo)致內(nèi)存泄漏！

import { createStoreBindings } from "mobx-miniprogram-bindings";

Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      /* 綁定配置（見下文） */
    });
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
});

3、綁定配置

無論使用哪種綁定方式，都必須提供一個(gè)綁定配置對(duì)象。這個(gè)對(duì)象包含的字段如下：

fields

fields 有三種形式：

• 數(shù)組形式：指定 data 中哪些字段來源于 store 。例如 ['numA', 'numB', 'sum'] 。
• 映射形式：指定 data 中哪些字段來源于 store 以及它們?cè)?store 中對(duì)應(yīng)的名字。例如 { a: 'numA', b: 'numB' } ，此時(shí) this.data.a === store.numA this.data.b === store.numB 。
• 函數(shù)形式：指定 data 中每個(gè)字段的計(jì)算方法。例如 { a: () => store.numA, b: () => anotherStore.numB } ，此時(shí) this.data.a === store.numA this.data.b === anotherStore.numB 。

上述三種形式中，映射形式和函數(shù)形式可以在一個(gè)配置中同時(shí)使用。

如果僅使用了函數(shù)形式，那么 store 字段可以為空，否則 store 字段必填。

actions

actions 可以用于將 store 中的一些 actions 放入頁面或自定義組件的 this 下，來方便觸發(fā)一些 actions 。有兩種形式：

• 數(shù)組形式：例如 ['update'] ，此時(shí) this.update === store.update 。
• 映射形式：例如 { buttonTap: 'update' } ，此時(shí) this.buttonTap === store.update 。

只要 actions 不為空，則 store 字段必填。

五、注意事項(xiàng)

1、延遲更新與立刻更新

為了提升性能，在 store 中的字段被更新后，并不會(huì)立刻同步更新到 this.data 上，而是等到下個(gè) wx.nextTick 調(diào)用時(shí)才更新。（這樣可以顯著減少 setData 的調(diào)用次數(shù)。）

如果需要立刻更新，可以調(diào)用：

• this.updateStoreBindings() （在 behavior 綁定 中）
• this.storeBindings.updateStoreBindings() （在 手工綁定 中）

2、與 miniprogram-computed 一起使用

與 miniprogram-computed 時(shí)，在 behaviors 列表中 computedBehavior 必須在后面：

Component({
  behaviors: [storeBindingsBehavior, computedBehavior],
  /* ... */
});

3、關(guān)于部分更新

如果只是更新對(duì)象中的一部分（子字段），是不會(huì)引發(fā)界面變化的！例如：

Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: ["someObject"],
  },
});

如果嘗試在 store 中：

this.someObject.someField = "xxx";

這樣是不會(huì)觸發(fā)界面更新的。請(qǐng)考慮改成：

this.someObject = Object.assign({}, this.someObject, { someField: "xxx" });

?文章來源地址http://www.zghlxwxcb.cn/news/detail-483986.html

到了這里，關(guān)于微信小程序的全局狀態(tài)管理 — mobx-miniprogram的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！