文章目录
- 前言
- 一、MobX的使用
- 1. 安装 MobX 相关的包
- 2. 创建 MobX 的 Store 实例
- 3.页面中使用Store成员
- 4.组件中使用Store成员
前言
开发中经常会遇到组件共享数据的问题，在各种前端框架中都会有对应的全局共享组件，全局数据共享是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。
在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中：
mobx-miniprogram用来创建 Store 实例对象mobx-miniprogram-bindings用来把 Store 中的共享数据或方法，绑定到组件或页面中使用
一、MobX的使用
1. 安装 MobX 相关的包
在项目中运行如下的命令，安装 MobX 相关的包：
代码语言：javascript复制npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1注意：MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm。
2. 创建 MobX 的 Store 实例
创建store.js用来创建store实例：
代码语言：javascript复制// 在这个 JS 文件中，专门来创建 Store 的实例对象
// ES6 的按需导入
import { observable, action } from 'mobx-miniprogram'
// ES6 的导出语法
export const store = observable({
// 数据字段
numA: 1,
numB: 2,
// 计算属性
get sum(){
return this.numA this.numB
},
// actions 函数，专门用来修改 store 中数据的值
updateNum1: action(function (step) {
this.numA = step
}),
updateNum2: action(function (step) {
this.numB = step
}),
})3.页面中使用Store成员
代码语言：javascript复制<view>
{{numA}} {{numB}} = {{sum}}
<button type="primary" bindtap="btn1" data-step="{{1}}">numA 1</button>
<button type="primary" bindtap="btn1" data-step="{{-1}}">numA-1</button>
</view>// 页面的.js文件
import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "../../store/store";
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.storeBindings = createStoreBindings(this,{
store,
fields:['numA','numB','sum'],
actions:['updateNum1']
})
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
this.storeBindings.destroyStoreBindings()
},
btn1(e){
this.updateNum1(e.target.dataset.step)
}
})createStoreBindings方法接收两个参数，一个是this代表当前页面的实例，第二参数是配置对象，包含三个属性：
- store代表数据源
- fields代表我们需要将哪些字段绑定到我们的页面中
- actions代表我们需要将哪些方法绑定到我们的页面中
createStoreBindings的调用有一个返回值，我们将这个返回值挂载到了当前页面上作为一个自定义属性storeBindings而存在，这样我们就可以在页面卸载时利用storeBindings来清理挂载的Store实例
4.组件中使用Store成员
代码语言：javascript复制{{numA}} {{numB}}={{sum}}
<button type="primary" bindtap="Cbtn1" data-step="{{1}}">CnumA 1</button>
<button type="primary" bindtap="Cbtn1" data-step="{{-1}}">CnumA-1</button>// components/numbers/numbers.js
import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from '../../store/store'
Component({
//通过storeBindingsBehavior来实现自动绑定
behaviors:[storeBindingsBehavior],
storeBindings:{
//指定要绑定的Store
store,
fields:{
// 绑定字段的第1种方式
numA:()=>store.numA,
// 绑定字段的第2种方式
numB:(store)=>store.numB,
// 绑定字段的第3种方式
sum:'sum'
},
actions:{
updateNum2:'updateNum2'
}
},
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
Cbtn1(e){
this.updateNum2(e.target.dataset.step)
},
}
})
