一、背景

? ? ? ? 需求是，每個(gè)播放視頻的地方都有控制是否靜音的按鈕，點(diǎn)某一個(gè)靜音則全局靜音。

? ? ? ? 問(wèn)題：由于我的每個(gè)小卡片都是一個(gè)組件，本質(zhì)是每個(gè)頁(yè)面引幾次同一個(gè)組件，剛開(kāi)始用的setData，但是這樣每個(gè)卡片中的數(shù)據(jù)都是經(jīng)過(guò)深拷貝而獨(dú)立的，所以點(diǎn)擊某個(gè)按鈕只會(huì)改變所在視頻的聲音狀態(tài)。

? ? ? ? 引申問(wèn)題：也試過(guò)用app.globalData，這樣只是在不同的頁(yè)面有效，同一個(gè)頁(yè)面多個(gè)組件還是無(wú)效。

二、解決辦法

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

使用方法：

1.在小程序中引入 MobX

? ?方法一：直接將mobx-miniprogram，mobx-miniprogram-bindings兩個(gè)文件夾引入項(xiàng)目

? ?方法二：在小程序項(xiàng)目中，可以通過(guò) npm 的方式引入 MobX 。如果你還沒(méi)有在小程序中使用過(guò) npm ，那先在小程序目錄中執(zhí)行命令：

npm init -y

? ?引入 MobX ：

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

? ?可以參考官方示例代碼段：（在微信開(kāi)發(fā)者工具中打開(kāi)）：?https://developers.weixin.qq.com/s/nGvWJ2mL7et0https://developers.weixin.qq.com/s/nGvWJ2mL7et0?

2.創(chuàng)建MobX Store

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


//是否靜音
const localVoice=wx.getStorageSync('voiceMuteStatus')
export const storeVoice = observable({
    //自定義屬性和方法
	voiceMuteStatus: localVoice,
	updateVoice: action(function(voiceMuteStatus) {
		this.voiceMuteStatus = voiceMuteStatus
	})
})

3.在組件Component 構(gòu)造器中使用

????如下代碼，即可實(shí)現(xiàn)全局聲音管理。

//引入storeBindingsBehavior和自定義的store方法
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings';
import { storeVoice } from '../../store/index';


Component({

    //在behaviors中
    behaviors: [storeBindingsBehavior],

    data: {

    },
    //綁定自己寫(xiě)的store
    storeBindings: {
        store: storeVoice,
        fields: {
            voiceMuteStatus: () => storeVoice.voiceMuteStatus,
        },
        actions: {
            buttonTap: 'updateVoice',
        },
    },
    methods: {
        changeVoice() {
            wx.setStorageSync('voiceMuteStatus', !storeVoice.voiceMuteStatus);
            //可以直接這樣調(diào)用updateVoice方法
            this.buttonTap(!storeVoice.voiceMuteStatus);
        },
    }
})

三、引申知識(shí)

1.MobX Store在組件Component和頁(yè)面Page的使用方法不同

??官方示例：

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; // 來(lái)自于 MobX store 的字段
  },
});

2.部分更新

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

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

如果嘗試在?store?中：

this.someObject.someField = "xxx";

這樣是不會(huì)觸發(fā)界面更新的。請(qǐng)考慮改成：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-502565.html

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

3.更詳細(xì)的請(qǐng)移步：

GitHub - wechat-miniprogram/mobx-miniprogram-bindings: 小程序的 MobX 綁定輔助庫(kù)小程序的 MobX 綁定輔助庫(kù). Contribute to wechat-miniprogram/mobx-miniprogram-bindings development by creating an account on GitHub.https://github.com/wechat-miniprogram/mobx-miniprogram-bindings

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