一、前言

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

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

globalData

本地緩存

mobx-miniprogram

westore

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

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

如理解有誤，歡迎評(píng)論糾正~

二、使用

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

官方代碼片段：代碼片段

第一步：安裝包文件

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

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

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

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

新建一個(gè)js文件，這里我們以購(gòu)物車為例。

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

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

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

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

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

第四步 使用、更新store

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

page

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

// 從 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)前頁(yè)面
    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)
      },
      // 頁(yè)面卸載時(shí),銷毀當(dāng)前頁(yè)面的 store 綁定
      onUnload() {
        this.chatStore.destroyStoreBindings();
      }
    })

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

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

在組件中使用、更新 store

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

從 mobx-miniprogram-bindings 包中導(dǎo)入 storeBindingsBehavior 方法，并在組件選項(xiàng)中定義 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è)置為一個(gè)數(shù)組，這樣可以同時(shí)綁定多個(gè) store 

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

三、延遲更新與立即更新

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

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

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

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

四、store 劃分模塊

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

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

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

頁(yè)面或組件中需要使用和更新哪些 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)管理的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論