1. 前言

从vuex到 redux ,react-redux , pinia, 最后的Mobx全部都得搞;
还好都不难,我的头发也是非常茂盛

---

2. 安装

1. npm install --save mobx-miniprogram mobx-miniprogram-bindings
2. 具体参考小程序安装依赖
3. 注意删除 miniprogram_npm 重新构建

---

3. 创建 仓库/store

1. 这步 其实所有的状态管理都差不多
2. 这个我是在项目根目录创建了 相关文件 /store/store.js
3. 核心代码

//这个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

1. 按需导入observable 看名字就知道是用来监测的,是个函数
2. 参数是个对象 ,需要全局共享的状态/数据 ,直接写:赋初值就
   行

action

1. 按需导入action 看名字就知道是动作,也就对应着我们相关的修改函数
2. 语法是 键:action(函数),函数的参数就是使用的时候传递过来的参数
3. 注意这个函数不要使用箭头函数 会有this的问题

计算属性

1. 直接就是写函数就行 ,不要忘记return.依赖于上面写的共享状态

---

4. 页面绑定 store

1. 按需导入
2. 挂载数据
3. 离开页面清理

// 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)
    }
})

1. 导入 自己封装的 store
2. 共享状态: 在onLoad里面创建 strore绑定,挂载 fields 需要的状态,按需挂载
3. 修改函数:actions,映射/绑定需要的修改函数

---

5. 页面使用

1. 事件绑定

 <button type="primary" size="mini" bindtap="changeNumA" data-n="{{10}}">{{numA}}</button>

2. 就调用了 js里面的changeNumA事件

---

6. 组件绑定 store

1. 组件和页面使用 store 有些许不同,因为在小程序里面组件和页面本身的构成有区别
2. 组件要想使用 store必须借用 小程序的behaviors(这个不会的回头再开篇文章就明白了,其实简单来说类似 vue的 mixin/混入)
3. 核心代码

// 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

1. 核心代码

<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>

---

参考资料

mobx

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉