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

微信小程序之状态管理

技术栈:mobx-miniprogram-bindings

使用Mobx绑定辅助库

使用方法

  1. 安装 mobx-miniprogrammobx-miniprogram-bindings

    css 复制代码
    npm install --save mobx-miniprogram mobx-miniprogram-bindings
  2. 构建npm

  3. 创建Mobx Store

    store.js

    kotlin 复制代码
    //根目录下创建路径 - 路径仅供参考
    // 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修改数据

  4. 使用(2种方式 - component/page)

    component中使用 - 使用behavior绑定

    做法: 使用storeBindingsBehavior

    javascript 复制代码
    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

    javascript 复制代码
    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 必须在后面:

css 复制代码
   Component({
     behaviors: [storeBindingsBehavior, computedBehavior],
     /* ... */
   });

关于部分更新

如果只是更新对象中的一部分(子字段),是不会引发界面变化的!例如:

php 复制代码
   Component({
     behaviors: [storeBindingsBehavior],
     storeBindings: {
       store,
       fields: ["someObject"],
     },
   });

如果尝试在 store 中:

ini 复制代码
   this.someObject.someField = "xxx";

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

kotlin 复制代码
   this.someObject = Object.assign({}, this.someObject, { someField: "xxx" });

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

相关推荐
晓风伴月7 小时前
微信小程序:在ios中border边框显示不全
ios·微信小程序·小程序
新酱爱学习9 小时前
前端海报生成的几种方式:从 Canvas 到 Skyline
前端·javascript·微信小程序
军军君0112 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具三:后端项目基础框架搭建上
前端·vue.js·spring boot·面试·elementui·微信小程序·uni-app
两个月菜鸟12 小时前
微信小程序进度条cavans
微信小程序·小程序
從南走到北12 小时前
JAVA青企码协会模式系统源码支持微信公众号+微信小程序+H5+APP
java·微信·微信小程序·小程序·uni-app·微信公众平台
mg66815 小时前
微信小程序入门实例_____从零开始 开发一个每天记账的微信小程序
微信小程序·小程序
sanhuamao15 小时前
Taro+nestjs+mongodb实现健身记录微信小程序
微信小程序·taro·nestjs
转转技术团队20 小时前
微信小程序 Skyline 渲染引擎解析:如何突破 WebView 的性能天花板
微信小程序
拼图2092 天前
微信小程序——配置路径别名和省略后缀
微信小程序·小程序