1. 前言
从vuex到 redux ,react-redux , pinia, 最后的Mobx全部都得搞;
还好都不难,我的头发也是非常茂盛
2. 安装
- npm install --save mobx-miniprogram mobx-miniprogram-bindings
- 具体参考小程序安装依赖
- 注意删除 miniprogram_npm 重新构建
3. 创建 仓库/store
- 这步 其实所有的状态管理都差不多
- 这个我是在项目根目录创建了 相关文件
/store/store.js- 核心代码
//这个js文件个 中,专门来创建 store实例对象
import {
action,
observable
} from "mobx-miniprogram";
export const store = observable({
// 数据字段 直接写
numA: 666,
numB: 999,
//计算属性
get sum() {
return this.numA + this.numB
},
/// actions 使用箭头函数 出this问题
updateNumA: action(function(n) {
this.numA += n
}),
updateNumB: action(function (step) {
this.numB += step
})
})
observable
- 按需导入
observable看名字就知道是用来监测的,是个函数- 参数是个对象 ,需要全局共享的状态/数据 ,直接写:赋初值就
行
action
- 按需导入
action看名字就知道是动作,也就对应着我们相关的修改函数- 语法是 键:action(函数),函数的参数就是使用的时候传递过来的参数
- 注意这个函数不要使用箭头函数 会有
this的问题
计算属性
- 直接就是写函数就行 ,不要忘记return.依赖于上面写的共享状态
4. 页面绑定 store
- 按需导入
- 挂载数据
- 离开页面清理
// pages/baseMobx/baseMobx.js
// 1. 按需导入
import { createStoreBindings } from "mobx-miniprogram-bindings";
import {store} from "../../store/store"
Page({
// 页面加载
onLoad(){
//2. 挂载
this.storeBindings = createStoreBindings(this,{
store,// store 对象
fields:["numA",'numB',"sum"],// 需要的字段
actions:["updateNumA","updateNumB"]
})
},
// 页面卸载
onUnload(){
this.storeBindings.destroyStoreBindings()
},
// *****************页面调用的方法好 直接写
changeNumA(e){
// 调用的 store的 action
this.updateNumA(e.target.dataset.n)
},
changeNumB(e){
this.updateNumB(e.target.dataset.step)
}
})
- 导入 自己封装的 store
- 共享状态: 在
onLoad里面创建 strore绑定,挂载 fields 需要的状态,按需挂载- 修改函数:actions,映射/绑定需要的修改函数
5. 页面使用
- 事件绑定
<button type="primary" size="mini" bindtap="changeNumA" data-n="{{10}}">{{numA}}</button>
- 就调用了 js里面的
changeNumA事件
6. 组件绑定 store
- 组件和页面使用 store 有些许不同,因为在小程序里面组件和页面本身的构成有区别
- 组件要想使用 store必须借用 小程序的
behaviors(这个不会的回头再开篇文章就明白了,其实简单来说类似 vue的 mixin/混入)- 核心代码
// components/comMobx/comMobx.js
//********************* 1 导入
import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from "../../store/store"
Component({
//********************* 2 通过 behaviors,storeBindingsBehavior来实现自动绑定
behaviors:[storeBindingsBehavior],
//********************* 3 类似组件创建 store
storeBindings:{
store,//指定绑定的 store
//********************* 4 共享状态
fields:{
// 类似vuex
numA:()=>store.numA,// 绑定字段方式---1
numB:(store)=>store.numB,// 绑定字段方式---2
sum:"sum",// 绑定字段方式---3 可以重命名
},
//********************* 5 修改函数
actions:{
updateNumA:'updateNumA',
updateNum2:"updateNumB",//重命名
}
},
// 组件的 方法必须写到 methods 里面
methods:{
//******************* 6 使用组件调用的 方法
changeNumA(e){
// 调用的是 store的 action
this.updateNumA(e.target.dataset.n)
},
changeNumB(e){
this.updateNum2(e.target.dataset.step)
}
}
})
7. 组件使用 store
- 核心代码
<view class="box">
<button type="primary" size="mini" bindtap="changeNumA" data-n="{{10}}">{{numA}}</button>
+
<button type="primary" size="mini" bindtap="changeNumB" data-step="{{1}}">{{numB}}</button> =
<button size="mini">{{sum}}</button>
</view>
