临沂电商网站建设,wordpress神级插件,朝阳双桥网站建设,开发人员选项怎么打开1.1 mobx-miniprogram 介绍
目前已经学习了 6 种小程序页面、组件间的数据通信方案#xff0c;分别是#xff1a;
数据绑定#xff1a;properties获取组件实例#xff1a;this.selectComponent()事件绑定#xff1a;this.triggerEvent()获取应用实例#xff1a;getApp(…1.1 mobx-miniprogram 介绍
目前已经学习了 6 种小程序页面、组件间的数据通信方案分别是
数据绑定properties获取组件实例this.selectComponent()事件绑定this.triggerEvent()获取应用实例getApp()页面间通信EventChannel事件总线pubsub-js
在中小型项目中使用这些数据通信方式已经能够满足我们项目的需求。
但是随着项目的业务逻辑越来越复杂组件和页面间通信就会变的非常复杂。例如有些状态需要在多个页面间进行同步使用一个地方发生变更所有使用的地方都需要发生改变这时候如果使用前面的数据通信方案进行传递数据给管理和维护将存在很大的问题。
为了方便进行页面、组件之间数据的传递小程序官方提供了一个扩展工具库 mobx-miniprogram
mobx-miniprogram 是针对微信小程序开发的一个简单、高效、轻量级状态管理库它基于Mobx状态管理框架实现。
使用 mobx-miniprogram 定义管理的状态是响应式的当状态一旦它改变所有关联组件都会自动更新相对应的数据
通过该扩展工具库开发者可以很方便地在小程序中全局共享的状态并自动更新视图组件从而提升小程序的开发效率
需要注意在使用 mobx-miniprogram 需要安装两个包mobx-miniprogram 和 mobx-miniprogram-bindings
mobx-miniprogram 的作用创建 Store 对象用于存储应用的数据mobx-miniprogram-bindings 的作用将状态和组件、页面进行绑定关联从而在组件和页面中操作数据
npm install mobx-miniprogram mobx-miniprogram-bindings官方文档 mobx-miniprogram 官方文档 mobx-miniprogram-bindings 官方文档
1.2 创建 Store 对象
如果需要创建 Store 对象需要使用 mobx-miniprogram 因此需要先熟悉 mobx-miniprogram 三个核心概念:
observable用于创建一个被监测的对象对象的属性就是应用的状态(state)这些状态会被转换成响应式数据。action用于修改状态(state)的方法需要使用 action 函数显式的声明创建。computed根据已有状态(state)生成的新值。计算属性是一个方法在方法前面必须加上 get 修饰符
mobx-miniprogram 详细的使用步骤如下 在项目的根目录下创建 store 文件夹然后在该文件夹下新建 index.js 在 /store/index.js 导入 observable 、action 方法 import { observable, action } from mobx-miniprogram使用 observable 方法需要接受一个 store 对象存储应用的状态 // observable用于创建一个被监测的对象对象的属性就是应用的状态(state)这些状态会被转换成响应式数据。
// action用于显式的声明创建更新 state 状态的方法
import { observable, action } from mobx-miniprogram// 使用 observable 创建一个被监测的对象
export const numStore observable({// 创建应用状态numA: 1,numB: 2,// 使用 action 更新 numA 以及 numBupdate: action(function () {this.numA1this.numB1}),// 计算属性使用 get 修饰符get sum() {return this.numA this.numB;}})
1.3 在组件中使用数据
如果需要 Page 或者Component中对共享的数据进行读取、更新操作需要使用 mobx-miniprogram-bindings
mobx-miniprogram-bindings 的作用就是将 Store 和 页面或组件进行绑定关联
如果需要在组件中使用状态需要 mobx-miniprogram-bindings 库中导入 ComponentWithStore 方法
在使用时需要将 Component 方法替换成 ComponentWithStore 方法 原本组件配置项也需要写到该方法中
在替换以后就会新增一个 storeBindings 配置项配置项常用的属性有以下三个
store: 指定要绑定的 Store 对象fields: 指定需要绑定的 data 字段actions: 指定需要映射的 actions 方法 注意事项 导入的数据会同步到组件的 data 中 导入的方法会同步到组件的 methods 中 // components/custom01/custom01.js
import { ComponentWithStore } from mobx-miniprogram-bindings
import { numStore } from ../../stores/numstoreComponentWithStore({data: {someData: ...},storeBindings: {store: numStore,fields: [numA, numB, sum],actions: [update]}
})
1.4 在页面中使用数据-方式1
Component 方法用于创建自定义组件。
小程序的页面也可以视为自定义组件因此页面也可以使用 Component 方法进行构建从而实现复杂的页面逻辑开发。
如果我们使用了 Component 方法来构建页面那么页面中如果想使用 Store 中的数据使用方式和组件的使用方式是一样的
从 mobx-miniprogram-bindings 库中导入 ComponentWithStore 方法将 Component 方法替换成 ComponentWithStore 方法然后配置 storeBindings 从 Store 中映射数据和方法即可
// index/index.js
import { ComponentWithStore } from mobx-miniprogram-bindings
import { numStore } from ../../stores/numstoreComponentWithStore({data: {someData: ...},storeBindings: {store: numStore,fields: [numA, numB, sum],actions: [update]}
})
1.5 在页面中使用数据-方式2
在上一节我们使用了 Component 方法构建页面然后使用 ComponentWithStore 方法让页面和 Store 建立了关联
如果不想使用 Component 方法构建页面。这时候需要使用 mobx-miniprogram-bindings 提供的 BehaviorWithStore 方法来和 Store 建立关联。
小程序的 behavior 方法是一种代码复用的方式可以将一些通用的逻辑和方法提取出来然后在多个组件中复用从而减少代码冗余提高代码的可维护性。在页面中也可以使用 behaviors 配置项
使用方式如下
新建 behavior 文件从 mobx-miniprogram-bindings 库中导入 BehaviorWithStore 方法在 BehaviorWithStore 方法中配置 storeBindings 配置项从 Store 中映射数据和方法在 Page 方法中导入创建的 behavior 然后配置 behavior 属性并使用导入的 behavior
// behavior.jsimport { BehaviorWithStore } from mobx-miniprogram-bindings
import { numStore } from ../../stores/numstoreexport const indexBehavior BehaviorWithStore({storeBindings: {store: numStore,fields: [numA, numB, sum],actions: [update],}
})
// index.jsimport { indexBehavior } from ./behaviorPage({behaviors: [indexBehavior]// 其他配置项
})
1.6 fields、actions 对象写法
fields、actions 有两种写法数组 或者 对象。
如果 fields 写成对象方式有两种写法 映射形式指定 data 中哪些字段来源于 store 以及它们在 store 中对应的名字。 例如 { a: numA, b: numB } 函数形式指定 data 中每个字段的计算方法 例如 { a: () store.numA, b: () anotherStore.numB }
如果 actions 写成对象方式只有两种写法
映射形式指定模板中调用的哪些方法来源于 store 以及它们在 store 中对应的名字。 例如 { buttonTap: update }
import { ComponentWithStore } from mobx-miniprogram-bindings
import { numStore } from ../../stores/numstoreComponentWithStore({data: {someData: ...},storeBindings: {store: numStore,fields: {// 使用函数方式获取 Store 中的数据a: () store.numA,b: () store.numB,// 使用映射形式获取 Store 中的数据值为数据在 store 中对应的名字total: sub},// 使用映射形式获取 Store 中的 action 名字actions: {// key 自定义为当前组件中调用的方法// 值为 store 中对应的 action 名字buttonTap: update}}
})
1.7 绑定多个 store 以及命名空间
在实际开发中一个页面或者组件可能会绑定多个 Store 这时候我们可以将 storeBindings 改造成数组。数组每一项就是一个个要绑定的 Store。
如果多个 Store 中存在相同的数据显示会出现异常。还可以通过 namespace 属性给当前 Store 开启命名空间在开启命名空间以后访问数据的时候需要加上 namespace 的名字才可以。
// behavior.jsimport { BehaviorWithStore } from mobx-miniprogram-bindings
import { numStore } from ../../stores/numstoreexport const indexBehavior BehaviorWithStore({storeBindings: [{namespace: numStore,store: numStore,fields: [numA, numB, sum],actions: [update],}]
})
// index/index.wxmlview{{ numStore.numA }} {{ numStore.numB }} {{numStore.sum}}/view
02. miniprogram-computed
小程序框架没有提供计算属性相关的 api 但是官方为开发者提供了拓展工具库 miniprogram-computed。
该工具库提供了两个功能
计算属性 computed监听器 watch
2.1 计算属性 computed
知识点
如果需要在组件中使用计算属性功能需要 miniprogram-computed 库中导入 ComponentWithComputed 方法
在使用时需要将 Component 方法替换成 ComponentWithComputed 方法 原本组件配置项也需要写到该方法中
在替换以后就可以新增 computed 以及 watch 配置项。
安装 miniprogram-computed 在安装以后需要点击 构建 npm进行本地构建
npm install miniprogram-computed注意事项 computed 函数中不能访问 this 但是提供了形参代表 data 对象 计算属性函数的返回值会被设置到 this.data.sum 字段中 官方文档miniprogram-computed
落地代码
计算属性 computed 的使用
// component.js// 引入 miniprogram-computed
import { ComponentWithComputed } from miniprogram-computedComponentWithComputed({data: {a: 1,b: 1},computed: {total(data) {// 注意 // computed 函数中不能访问 this 只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中// 计算属性具有缓存计算属性使用多次但是计算属性方法只会执行一次console.log(~~~~~)return data.a data.b}}
})
2.2 监听器 watch
在使用时需要将 Component 方法替换成 ComponentWithComputed 方法 原本组件配置项也需要写到该方法中
在替换以后就可以新增 computed 以及 watch 配置项。
// 引入 miniprogram-computed
import { ComponentWithComputed } from miniprogram-computedComponentWithComputed({data: {a: 1,b: 1},computed: {total(data) {// 注意 // computed 函数中不能访问 this 只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中return data.a data.b}}watch: {// 同时对 a 和 b 进行监听a, b: function (a, b) {this.setData({total: a b})}},methods: {updateData() {this.setData({a: this.data.a 1,b: this.data.b 1})}}
})
拓展Mobx 与 Computed 结合使用
两个框架扩展提供的 ComponentWithStore 与 ComponentWithComputed 方法无法结合使用。
如果需要在一个组件中既想使用 mobx-miniprogram-bindings 又想使用 miniprogram-computed
解决方案是 使用旧版 API 自定义组件仍然使用 Component 方法构建组件将两个扩展依赖包的使用全部改为旧版 API mobx-miniprogram-bindings 官方文档 miniprogram-computed 官方文档 使用兼容写法 即要么使用 ComponentWithStore 方法构建组件要么使用 ComponentWithComputed 方法构建组件 如果使用了 ComponentWithStore 方法构建组件计算属性写法使用旧版 API 如果使用了 ComponentWithComputed 方法构建组件Mobx写法使用旧版 API
我们演示使用兼容写法 如果使用了 ComponentWithStore 方法构建组件计算属性写法使用旧版 API import { ComponentWithComputed } from miniprogram-computed// component.js
const computedBehavior require(miniprogram-computed).behaviorComponentWithStore({behaviors: [computedBehavior],data: {a: 1,b: 1,sum: 2},watch: {a, b: function (a, b) {this.setData({total: a b})}},computed: {total(data) {// 注意 computed 函数中不能访问 this 只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中return data.a data.b data.sum // data.c 为自定义 behavior 数据段}},// 实现组件和 Store 的关联storeBindings: {store: numStore,// fields 和 actions 有两种写法数组写法 和 对象写法// 数组写法fields: [numA, numB, sum],actions: [update]}
})使用了 ComponentWithComputed 方法构建组件Mobx写法使用旧版 API import { ComponentWithComputed } from miniprogram-computed// 导入 storeBindingsBehavior 方法实现组件和 Store 的关联
import { storeBindingsBehavior } from mobx-miniprogram-bindings
// 导入 Store
import { numStore } from ../../stores/numstoreComponentWithComputed({behaviors: [storeBindingsBehavior],data: {a: 1,b: 1,sum: 2},watch: {a, b: function (a, b) {this.setData({total: a b})}},computed: {total(data) {// 注意 computed 函数中不能访问 this 只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中return data.a data.b data.sum // data.c 为自定义 behavior 数据段}},// 实现组件和 Store 的关联storeBindings: {store: numStore,// fields 和 actions 有两种写法数组写法 和 对象写法// 数组写法fields: [numA, numB, sum],actions: [update]}
})
