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>
