一、背景
需求是,每个播放视频的地方都有控制是否静音的按钮,点某一个静音则全局静音。
问题:由于我的每个小卡片都是一个组件,本质是每个页面引几次同一个组件,刚开始用的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
中:文章来源:https://www.toymoban.com/news/detail-502565.html
this.someObject.someField = "xxx";
这样是不会触发界面更新的。请考虑改成:文章来源地址https://www.toymoban.com/news/detail-502565.html
this.someObject = Object.assign({}, this.someObject, { someField: "xxx" });
3.更详细的请移步:
GitHub - wechat-miniprogram/mobx-miniprogram-bindings: 小程序的 MobX 绑定辅助库小程序的 MobX 绑定辅助库. Contribute to wechat-miniprogram/mobx-miniprogram-bindings development by creating an account on GitHub.https://github.com/wechat-miniprogram/mobx-miniprogram-bindings
到了这里,关于微信小程序:全局状态管理mobx-miniprogram(类似store)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!