微信小程序的全局状态管理 — mobx-miniprogram

这篇具有很好参考价值的文章主要介绍了微信小程序的全局状态管理 — mobx-miniprogram。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、简介

在小程序中,常常有些数据需要在几个页面或组件中共享。使用 MobX 来管理小程序的跨页面数据,  其实类似于vuex的store。

小程序的 MobX 绑定辅助库。

此 behavior 依赖开发者工具的 npm 构建。具体详情可查阅 官方 npm 文档 。

可配合 MobX 的小程序构建版 npm 模块 mobx-miniprogram 使用。

 更为详细的说明和指引,可点击项目地址。

 

二、使用方法 

需要小程序基础库版本 >= 2.2.3 的环境。

可以直接参考这个代码片段(在微信开发者工具中打开): https://developers.weixin.qq.com/s/nGvWJ2mL7et0

1、安装 mobx-miniprogram 和 mobx-miniprogram-bindings 

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

2.、创建 MobX Store

// store.js
import { observable, action } from "mobx-miniprogram";

export const store = observable({
  // 数据字段
  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;
  }),
});

3、在 Component 构造器中使用

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import { store } from "./store";

Component({
  behaviors: [storeBindingsBehavior],
  data: {
    someData: "...",
  },
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA,
      numB: (store) => store.numB,
      sum: "sum",
    },
    actions: {
      buttonTap: "update",
    },
  },
  methods: {
    myMethod() {
      this.data.sum; // 来自于 MobX store 的字段
    },
  },
});

4、在 Page 构造器中使用

如果小程序基础库版本在 2.9.2 以上,可以直接像上面 Component 构造器那样引入 behaviors 。

如果需要比较好的兼容性,可以使用下面这种方式(或者直接改用 Component 构造器来创建页面)。

import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "./store";

Page({
  data: {
    someData: "...",
  },
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      store,
      fields: ["numA", "numB", "sum"],
      actions: ["update"],
    });
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
  myMethod() {
    this.data.sum; // 来自于 MobX store 的字段
  },
});

三、Typescript 支持

2.1.2 版本开始提供了简单的 TypeScript 支持。

新增两个构造器 API,推荐优先使用下列新版接口,你也可以继续使用旧版接口,详见接口说明。

1、ComponentWithStore

import { ComponentWithStore } from "mobx-miniprogram-binding";
ComponentWithStore({
  options: {
    styleIsolation: "shared",
  },
  data: {
    someData: "...",
  },
  storeBindings: {
    store,
    fields: ["numA", "numB", "sum"],
    actions: {
      buttonTap: "update",
    },
  },
});

2、BehaviorWithStore

import { BehaviorWithStore } from "mobx-miniprogram-binding";
export const testBehavior = BehaviorWithStore({
  storeBindings: {
    store,
    fields: ["numA", "numB", "sum"],
    actions: ["update"],
  },
});

四、接口

将页面、自定义组件和 store 绑定有两种方式: behavior 绑定手工绑定

1、behavior 绑定

behavior 绑定 适用于 Component 构造器。做法:使用 storeBindingsBehavior 这个 behavior 和 storeBindings 定义段。

注意:你可以用 Component 构造器构造页面, 参考文档 。

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    /* 绑定配置(见下文) */
  },
});

也可以把 storeBindings 设置为一个数组,这样可以同时绑定多个 store

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [
    {
      /* 绑定配置 1 */
    },
    {
      /* 绑定配置 2 */
    },
  ],
});

2、手工绑定

手工绑定 适用于全部场景。

做法:使用 createStoreBindings 创建绑定,它会返回一个包含清理函数的对象用于取消绑定。

注意:在页面 onUnload (自定义组件 detached )时一定要调用清理函数,否则将导致内存泄漏!

import { createStoreBindings } from "mobx-miniprogram-bindings";

Page({
  onLoad() {
    this.storeBindings = createStoreBindings(this, {
      /* 绑定配置(见下文) */
    });
  },
  onUnload() {
    this.storeBindings.destroyStoreBindings();
  },
});

3、绑定配置

无论使用哪种绑定方式,都必须提供一个绑定配置对象。这个对象包含的字段如下:

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

fields

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

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

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

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

五、注意事项

1、延迟更新与立刻更新

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

如果需要立刻更新,可以调用:

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

2、与 miniprogram-computed 一起使用

与 miniprogram-computed 时,在 behaviors 列表中 computedBehavior 必须在后面:

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

3、关于部分更新

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

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

如果尝试在 store 中:

this.someObject.someField = "xxx";

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

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

 文章来源地址https://www.toymoban.com/news/detail-483986.html

到了这里,关于微信小程序的全局状态管理 — mobx-miniprogram的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序通过 wxministore 实现类似于vuex的全局装填数据管理

    首先 我们打开终端 引入依赖 然后 如果你是新版开发者工具 就 构建一下 如果你是 老版本的 微信开发者工具 就打开右上角详情 选择本地管理 勾选 使用 npm 模块 然后 在根目录下创建一个 store.js 当然建在哪是你自己决定的 反正 后面能引入到就好 然后 store.js 编写代码如下

    2024年02月05日
    浏览(39)
  • 微信小程序TS项目使用mobx(页面直接使用store和自定义组件中使用store)

     注意:下载完成后,需要删除 miniprogram_npm 目录后,重新构建 npm。 注意:ts编写的话,方法中使用this,需要在参数中定义this: any,否则会提示错误 引入onLoad()方法中引入createStoreBindings将store上的方法和属性绑定到页面中 在unOnLoad()方法中销毁destroyStoreBindings() 页面中使用:

    2024年02月16日
    浏览(48)
  • 小程序MobX创建store并实现全局数据共享

    没有package.json文件输入 npm init -y 初始化一下,初始化一个包管理 npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1 .js文件 此时可以在页面中用{{}}使用store中的数据 使用store中的action方法 页面绑定一个方法,并且使用 data-* 进行传参 在js中使用 打印 点击之后就可以是页面

    2024年02月16日
    浏览(41)
  • React中使用mobx管理状态数据使用样例

    MobX 是一个身经百战的库,它通过运用透明的函数式响应编程(Transparent Functional Reactive Programming,TFRP)使状态管理变得简单和可扩展。官网地址:关于 MobX | MobX中文文档 | MobX中文网 mobx-react-lite是一个mobx和react建立链接的依赖库,也必须安装才可以使用 并使用store/index.js统一

    2024年02月13日
    浏览(51)
  • uniapp小程序自定义loding,通过状态管理配置全局使用

    一、在项目中创建loding组件 在uniapp的components文件夹下创建loding组件,如图: 示例代码: 二、在main.js中全局挂载store 三、配置loding状态管理(状态管理可以按自己的需求配置) 状态管理存储: 在store文件夹下创建modules文件,里面创建loding.js 模块统一暴露: 在store文件夹下创

    2024年02月15日
    浏览(36)
  • 微信小程序 全局配置||微信小程序 页面配置||微信小程序 sitemap配置

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 以下是一个包含了部分常用配置选项的 app.json : 每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配

    2024年02月01日
    浏览(44)
  • 微信小程序全局配置

    小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下: ① pages 记录当前小程序所有页面的存放路径 ② window 全局设置小程序窗口的外观 ③ tabBar 设置小程序底部的 tabBar 效果 ④ style 是否启用新版的组件样式  设置步骤:app.json - window - navigationBarTitle

    2024年04月17日
    浏览(36)
  • 微信小程序全局路由拦截

    略 目前微信小程序没有全局路由拦截。要想实现全局路由拦截,需要自己进行扩充。具体参考这里:微信小程序–路由拦截器。 实现思路: 替换Page的参数对象的onShow或onLoad方法。 在替换的onShow或onLoad方法中判断是否已经登录。 将替换后的参数对象传给Page。 实现思路: 使

    2024年02月11日
    浏览(38)
  • 微信小程序全局配置详解

    登录网址 https://mp.weixin.qq.com/ 注册网址 https://mp.weixin.qq.com/cgi-bin/wx?token=lang=zh_CN 下载地址 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 描述整体的app app.js 小程序逻辑 app.json 小程序公共配置 app.wxss 小程序公共样式表 描述各自页面的page 为了方便开发者减少配置项,

    2024年02月13日
    浏览(45)
  • 微信小程序全局websocket

    全篇干货无废话 实现微信小程序全局websocket 含掉线重连,心跳保活等机制,可做参考示例 app.js

    2024年02月09日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包