一、前言

在本文開始前請大家先想想在微信小程序中如果要做到全局狀態(tài)共享有幾種實現(xiàn)方式？

在這里給大家列舉幾種目前已知的方式：

globalData

本地緩存

mobx-miniprogram

westore

globalData和緩存應(yīng)該是大家比較熟悉的，但這二者會隨著項目的不斷迭代逐漸變的混亂和不易維護(hù)。

所以針對此種情況mobx-miniprogram和westore應(yīng)運而生。因前段時間公司項目剛好用到了mobx-miniprogram，所以借著公司的業(yè)務(wù)場景本文就展開講一講mobx-miniprogram，看看mobx-miniprogram是如何實現(xiàn)的小程序的全局狀態(tài)管理。

如理解有誤，歡迎評論糾正~

二、使用

mobx-miniprogram 的功能其實非常純粹與簡單，就是創(chuàng)建一個 store。但將 store 的數(shù)據(jù)映射到頁面或組件時，就需要 mobx-miniprogram-bindings 庫，它類似 react-redux，用于連接 store 與頁面/組件的橋梁。

官方代碼片段：代碼片段

第一步：安裝包文件

npm install --save mobx-miniprogram mobx-miniprogram-bindings
yarn add mobx-miniprogram mobx-miniprogram-bindings

第二步：構(gòu)建npm

微信開發(fā)者工具---> 工具---> 構(gòu)建npm

第三步：創(chuàng)建MobX Store

新建一個js文件，這里我們以購物車為例。

我們需全局共享購物車內(nèi)的商品的狀態(tài)、數(shù)量，做到一處修改全局變化。

import { observable, action } from 'mobx-miniprogram'

從 mobx-miniprogram 包中導(dǎo)入 observable 和 action 兩個方法。

• observable: 用于創(chuàng)建 store 的實例對象
• action: 用于包裹修改 store 數(shù)據(jù)的函數(shù)

// 創(chuàng)建實例對象
export const chat = observable({
    // 定義兩個全局參數(shù)
    chatList: [], // 購物車商品
    totalPrice: 0, // 購物車商品總價
    // 初始化購物車
    initChat: action(function (list) {
        this.chatList = list
    }),
    // 修改價格
    setPrice: action(function (price) {
        this.totalPrice = price
    }),
})

第四步 使用、更新store

store的應(yīng)用，在page和component中是兩種不同的方式

page

在page頁面使用，我們需要用到 mobx-miniprogram-bindings 用于連接 store 與page頁面

// 從 mobx-miniprogram-bindings 包中導(dǎo)入?`createStoreBindings`?方法
import { createStoreBindings } from "mobx-miniprogram-bindings"
import chat from "../../models/chat"
Page({
   // onLoad 生命周期鉤子中使用createStoreBindings，把指定 store 中的數(shù)據(jù)字段和更新函數(shù)映射到當(dāng)前頁面
    onLoad() {
        this.chatStore = createStoreBindings(this, {
          store: chat,
          fields: ['chatList', 'totalPrice'],
          actions: ['initChat']
        })
      },
      // 
      fu() {
        let chat = [
            {
                name: 'XXXX',
                price: '111'
            },
            {
                name: 'XXXX',
                price: '111'
            }
        ]
        this.initChat(chat)
      },
      // 頁面卸載時,銷毀當(dāng)前頁面的 store 綁定
      onUnload() {
        this.chatStore.destroyStoreBindings();
      }
    })

createStoreBindings 方法調(diào)用會返回一個包含 updateStoreBindings，destroyStoreBindings 兩個函數(shù)的對象，并且賦值給了當(dāng)前頁面實例的 storeBindings 屬性。

所以，當(dāng)頁面卸載（onUnload）時，調(diào)用 destroyStoreBindings 銷毀當(dāng)前頁面的 store 綁定，避免造成內(nèi)存泄露

在組件中使用、更新 store

與在頁面使用 store 方式不同，在組件中要結(jié)合 behaviors（類似 Vue 中的混入）方式。

從 mobx-miniprogram-bindings 包中導(dǎo)入 storeBindingsBehavior 方法，并在組件選項中定義 storeBindings 字段。

import { storeBindingsBehavior } from "mobx-miniprogram-bindings"
import chat from "../../models/chat"
Component({
   behaviors: [storeBindingsBehavior],
   storeBindings: {
      store: chat,
      fields: ['totalPrice'],
      actions: ['setPrice']
   }，
   methods: {
     fn() {
       this.setPrice(666)
     }
   }
})

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

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

三、延遲更新與立即更新

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

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

• this.updateStoreBindings() 在組件中
• this.storeBindings.updateStoreBindings() 在頁面中

this.setPrice(666)
this.storeBindings.updateStoreBindings()
console.log(this.data.totalPrice)

四、store 劃分模塊

隨著項目越大，功能越豐富，項目模塊的狀態(tài)也越多，為了防止在一個 store 中堆積其他模塊的狀態(tài)，可根據(jù)功能模塊或職責(zé)劃分多個 store。

比如在 store 目錄下劃分以下模塊：

• userStore.js
• cartStore.js
• orderStore.js

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

    createStoreBindings(this, {store: xxx})
    storeBindings: {
      store: xxx,
    }

以上就是微信小程序?qū)崿F(xiàn)全局狀態(tài)管理的方法整理的詳細(xì)內(nèi)容，更多關(guān)于小程序全局狀態(tài)管理的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論