微信小程序MoxB實現(xiàn)全局狀態(tài)管理流程詳解

更新時間：2022年11月30日 14:13:07 作者：花鐺

這篇文章主要介紹了微信小程序使用MoxB實現(xiàn)全局狀態(tài)管理方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧

安裝 MobX

在小程序根目錄下執(zhí)行 npm install --save mobx-miniprogram mobx-miniprogram-bindings 安裝 mobx-miniprogram 和 mobx-miniprogram-bindings 。
點擊開發(fā)者工具中的菜單欄：工具 --> 構(gòu)建 npm 完成構(gòu)建。

創(chuàng)建 MobX Store

在小程序根目錄下新建 store.js文件，創(chuàng)建 MobX Store。

// store.js
import { observable, action } from "mobx-miniprogram";
export const store = observable({
  // 數(shù)據(jù)字段
  numA: 1,
  numB: 2,
  // 計算屬性
  get sum() {
    return this.numA + this.numB;
  },
  // actions
  updateNumA: action(function () {
    this.numA = 3;
  }),
});

使用 MobX Store

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

behavior 綁定：使用 storeBindingsBehavior 這個 behavior 和 storeBindings 定義段。

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
     // 綁定配置
  },
  // 也可以把 storeBindings 設(shè)置為一個數(shù)組，可以同時綁定多個 store
  storeBindings: [
    {
      // 綁定配置 1
    },
    {
      // 綁定配置 2
    },
  ],
})

手工綁定：使用 createStoreBindings 創(chuàng)建綁定，它會返回一個包含清理函數(shù)的對象用于取消綁定。

在頁面 onUnload 或自定義組件 detached 時一定要調(diào)用清理函數(shù)，否則將導致內(nèi)存泄漏。

import { createStoreBindings } from "mobx-miniprogram-bindings";Page({ onLoad() { this.storeBindings = createStoreBindings(this, { // 綁定配置 }); }, onUnload() { this.storeBindings.destroyStoreBindings(); },});import { createStoreBindings } from "mobx-miniprogram-bindings";
Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      // 綁定配置
    });
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
});

無論使用哪種綁定方式，都必須提供一個綁定配置對象。這個對象包含以下字段：

store：一個 MobX observable。用于指定默認的 MobX store。

fields：數(shù)組或?qū)ο蟆Ｓ糜谥付ㄐ枰壎ǖ?data 字段。

fields 有三種形式：

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

actions：數(shù)組或?qū)ο?。用于指定需要映射?actions，將 store 中的一些 actions 放入頁面或自定義組件的 this 下。

actions 有兩種形式：

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

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

如果需要立刻更新，可以在 behavior 綁定中調(diào)用 this.updateStoreBindings()，或者在手工綁定中調(diào)用 this.storeBindings.updateStoreBindings()。

如果只是更新對象中的一部分，是不會引發(fā)界面變化的。

例如：this.someObject.someField = "xxx"; 是不會觸發(fā)界面更新的，可以改成this.someObject = Object.assign({}, this.someObject, { someField: "xxx" });。

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

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import { store } from "../../store/store";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      numA: "numA",
      numB: "numB",
      sum: "sum",
    },
    actions: {
      updateNumA: "updateNumA",
    },
  },
  methods: {
    myMethod() {
      this.updateNumA()
      wx.nextTick(() => {
        const A = this.data.numA; // 3
        const B = this.data.numB; // 2
        const C = this.data.sum; // 5
      })
    },
  },
});

在 Page 頁面中使用

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

import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "../../store/store";
Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ["numA", "numB", "sum"],
      actions: ["updateNumA"],
    });
    wx.nextTick(() => {
      const A = this.data.numA; // 1
      const B = this.data.numB; // 2
      const C = this.data.sum; // 3
    })
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
  myMethod() {
    this.updateNumA()
    wx.nextTick(() => {
      const A = this.data.numA; // 3
      const B = this.data.numB; // 2
      const C = this.data.sum; // 5
    })
  },
})

到此這篇關(guān)于微信小程序MoxB實現(xiàn)全局狀態(tài)管理流程詳解的文章就介紹到這了,更多相關(guān)小程序MoxB全局狀態(tài)管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: