一、背景
需求是，每个播放视频的地方都有控制是否静音的按钮，点某一个静音则全局静音。
问题：由于我的每个小卡片都是一个组件，本质是每个页面引几次同一个组件，刚开始用的setData，但是这样每个卡片中的数据都是经过深拷贝而独立的，所以点击某个按钮只会改变所在视频的声音状态。
引申问题：也试过用app.globalData，这样只是在不同的页面有效，同一个页面多个组件还是无效。
二、解决办法
在小程序中，常常有些数据需要在几个页面或组件中共享。使用 MobX 来管理小程序的跨页面数据, 其实类似于vuex的store。
使用方法：
1.在小程序中引入 MobX
方法一：直接将mobx-miniprogram，mobx-miniprogram-bindings两个文件夹引入项目
方法二：在小程序项目中，可以通过 npm 的方式引入 MobX 。如果你还没有在小程序中使用过 npm ，那先在小程序目录中执行命令：
npm init -y
引入 MobX ：
npm install --save mobx-miniprogram mobx-miniprogram-bindings 可以参考官方示例代码段：（在微信开发者工具中打开）： https://developers.weixin.qq.com/s/nGvWJ2mL7et0https://developers.weixin.qq.com/s/nGvWJ2mL7et0
2.创建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 构造器中使用
如下代码，即可实现全局声音管理。
//引入storeBindingsBehavior和自定义的store方法
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings';
import { storeVoice } from '../../store/index';
Component({
//在behaviors中
behaviors: [storeBindingsBehavior],
data: {
},
//绑定自己写的store
storeBindings: {
store: storeVoice,
fields: {
voiceMuteStatus: () => storeVoice.voiceMuteStatus,
},
actions: {
buttonTap: 'updateVoice',
},
},
methods: {
changeVoice() {
wx.setStorageSync('voiceMuteStatus', !storeVoice.voiceMuteStatus);
//可以直接这样调用updateVoice方法
this.buttonTap(!storeVoice.voiceMuteStatus);
},
}
})三、引申知识
1.MobX Store在组件Component和页面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; // 来自于 MobX store 的字段
},
});2.部分更新
如果只是更新对象中的一部分（子字段），是不会引发界面变化的！例如：
Component({
behaviors: [storeBindingsBehavior],
storeBindings: {
store,
fields: ["someObject"],
},
});如果尝试在 store 中：
this.someObject.someField = "xxx";这样是不会触发界面更新的。请考虑改成：
this.someObject = Object.assign({}, this.someObject, { someField: "xxx" });
https://github.com/wechat-miniprogram/mobx-miniprogram-bindings