微信小程序之状态管理 - Mobx

微信小程序之状态管理

技术栈:mobx-miniprogram-bindings

使用Mobx绑定辅助库

使用方法

0. 安装 mobx-miniprogram 和 mobx-miniprogram-bindings

   npm install --save mobx-miniprogram mobx-miniprogram-bindings

1. 构建npm

2. 创建Mobx Store

   store.js

   //根目录下创建路径 - 路径仅供参考
   // models(store)/index.js - 名字随意，官方给的是models，二级目录名字看使用场景，如果是用户可以是user.js，如果是购物车可以是cars.js
   // 代码块
   import { observable,action } from 'mobx-miniprogram'
   export const store = observable({
   //数据字段 - 类似于vuex中的state
   numA:1,
   numB:2,
    //计算属性
    get sum() {
      return this.numA + this.numB 
    },
       //actions
    update:action(function(){
        const sum = this.sum;
        this.numA = this.numB;
        this.numB = sum
    })
   })

   observable方法：将普通的js对象转换为可观察对象

   在这个状态管理仓库中利用observable函数定义了几个属性和方法：

   其中numA，numB是状态数据

   get关键字定义计算属性，sum是计算属性用于计算numA,numB和

   update(动作)，action装饰器定义的动作 - 用于修改可观察对象的属性。档update触发时，确保数据的更新。

   一句话：直接定义状态数据，get做逻辑运算，actions修改数据

3. 使用（2种方式 - component/page）

   component中使用 - 使用behavior绑定

   做法： 使用storeBindingsBehavior

   import { storeBindingsBehavior } from "mobx-moniprogram-bindings"
   import { store } from "../../store/store"
   Component({
    behaviors:[storeBindingsBehavior],
    data:{
        someData:"...",
    },
    storeBindings:{
        store,
        fields:{
            numA:() => store.numA,
            numB:(store) => store.NumB
            sum:"sum"
        },
        actions:{
            // buttonTap - 绑定按钮点击动作
            buttonTap:'update'
        }
    }
    methods：{
       myMethod() {
       this.data.sum; // 来自于 MobX store 的字段
       },
   }
   })

   behaviors:小程序内置属性 - 用于指定要应用的行为

   someData:"...":定义一个初始值是"..."的变量

   storeBindings:指定要绑定的属性和动作 - 来自mobx-miniprogram-bindings库 - 用于在小程序中实现可观察对象和组件之间的绑定。其中的键表示要绑定的属性或动作，值是一个函数或一个字符串。

   store:指定要绑定的可观察对象

   fields:指定要绑定的属性

   actions:指定要绑定的动作

   常见的绑定动作：
   0. click - buttonClick

   1. change - inputChange
   2. submit - formSubmit
   3. keydown - keyPressed
   4. swiperChange - swiperSlideChange
   5. scrollToLower - loadMoreData

   this.data.sum:调用store里面的sum方法，值就是sum的返回值

   ---

   在page构造器中使用 - 手工绑定

   做法：createStoreBindings

   import { createStoreBindings } from 'mobx-miniprogram-bindings'
   import { store } from '../../store/store'
   Page({
       //页面初始数据
       data:{
           someData:'...'
       },
       onLoad(option){
           //在onload中创建
           this.storeBindings = createStoreBindings(this,{
               store,
               fields:['numA','numB','sum'],
               actions:['update']
           })
       },
       onUnload(){
           //在页面卸载的时候清理
           this.storeBindings.destroyStoreBindings()
       },
       myMethod(){
           this.data.sum
       }
   })

   无论是哪种绑定方式，都必须提供一个绑定配置对象

   字段名	类型	含义
   store	observable	默认的store
   fields	数组或对象	用于指定需要绑定的data字段
   actions	数组或者对象	用于指定需要映射的actions

   fields有三种形式

   • 数组形式：指定data中哪些字段来源于store。例如['numA','numB','sum']
   • 映射形式：指定data中哪些字段来源于store以及它们在store中对应的名字。例如{a:'numA',b:'numB'},此时this.data.a === store.numA,this.data.b === store.numB
   • 函数形式：指定data中每个字段的计算方法。例如{a:()=> store.numA,b:()=>anotherStore.numB},此时this.data.a === store.numA,this.data.b === anotherStore.numB

   以上三种形式中，映射形式和函数形式可以在一个配置中同时使用，如果仅使用了函数形式，那么store字段可以为空，否则store字段必填

   actions

   用于将store中的一些actions放入到页面或者自定义组件的this下，来方便触发一些actions。有两种形式

   • 数组形式：例如'update',此时this.update === store.update
   • 映射形式：例如{buttonTap:'update'},此时this.buttonTap === store.update

   只要actions不为空，则store字段必填

注意事项

延迟更新与立刻更新

为了提升性能，在 store 中的字段被更新后，并不会立刻同步更新到 this.data 上，而是等到下个 wx.nextTick 调用时才更新。（这样可以显著减少 setData 的调用次数。）

如果需要立刻更新，可以调用：

• this.updateStoreBindings() （在 behavior 绑定 中）
• this.storeBindings.updateStoreBindings() （在 手工绑定 中）

与 miniprogram-computed 一起使用

与 miniprogram-computed 时，在 behaviors 列表中 computedBehavior 必须在后面：

   Component({
     behaviors: [storeBindingsBehavior, computedBehavior],
     /* ... */
   });

关于部分更新

如果只是更新对象中的一部分（子字段），是不会引发界面变化的！例如：

   Component({
     behaviors: [storeBindingsBehavior],
     storeBindings: {
       store,
       fields: ["someObject"],
     },
   });

如果尝试在 store 中：

   this.someObject.someField = "xxx";

这样是不会触发界面更新的。请考虑改成：

   this.someObject = Object.assign({}, this.someObject, { someField: "xxx" });

官方参考文档：mobx-miniprogram-bindings - npm (npmjs.com)