免费wap网站建设wordpress后台修改
目前已经学习了6种小程序页面、组件间的数据通信方案,分别是:
1. 数据绑定: properties
2.获取组件实例: this.selectComponent()
3.事件绑定: this.triggerEvent()
4. 获取应用实例：getApp()
5. 页面间通信: EventChannel
6.事件总线:pubsub-js
在中小型项目中，使用这些数据通信方式已经能够满足我们项目的需求。但是随着项目的业务逻辑越来越复杂，组件和页面间通信就会变的非常复杂。例如：有些状态需要在多个页面间进行同步使用，一个地方发生变更,所有使用的地方都需要发生改变,这时候如果使用前面的数据通信方案进行传递数据,给管理和维护将存在很大的问题。为了方便进行页面、组件之间数据的传递，小程序官方提供了一个扩展工具库：mobx-miniprogram
框架扩展: mobx-miniprogram:
mopx-miniprogram 是针对微信小程序开发的一个简单、高效、轻量级状态管理库，它基于 Mobx 状态管理框架实现。
使用 mobx-miniprogram 定义管理的状态是响应式的，当状态一旦它改变，所有关联组件都会自动更新相对应的数据通过该扩展工具库,开发者可以很方便地在小程序中全局共享的状态,并自动更新视图组件,从而提升小程序的开发效率
需要注意:在使用 mobx-miniprogram 需要安装两个包:
mobx-miniprogram 和 mobx-miniprogram-bindings
npm install mobx-miniprogram mobx-miniprogram-bindings- mobx-miniprogram 的作用:创建 Store 对象,用于存储应用的数据
- mobx-miniprogram-bindings 的作用:将状态和组件、页面进行绑定关联,从而在组件和页面中操作数据
- 安装完毕后,不要忘了左上角---编辑---构建
创建Store:
需要使用 mobx-miniprogram ,因此需要先熟悉 mobx-miniprogram 三个核心概念:
1. observable: 用于创建一个被监测的对象,对象的属性就是应用的状态(state),这些状态会被转换成响应式数据。
2. action: 用于修改状态（state）的方法，需要使用 action 函数显式的声明创建。
3. computed: 根据已有状态(state)生成的新值。计算属性是一个方法，在方法前面必须加上 get 修饰符
- 在项目的根目录下创建 store 文件夹,然后在该文件夹下新建 numStore.js (名字任意)
- 在 /store/numStore.js 导入 observable、action 方法
import { observable, action } from 'mobx-miniprogram'export const numStore = observable({// 对象的属性就是应用的状态numA:1,numB:2,// 定义 action 方法,用来修改状态update: action(function(){// 在方法中如果需要获取状态,可以使用 this 进行获取this.numA += 1this.numB += 1 })// 计算属性 computed// 是根据已有状态产生新的状态// 计算属性前面需要使用 get 修饰符进行修饰get sum(){// 计算属性内部必须要有返回值retrun this.numA + this.numB}
})通用方法:在组件中使用数据
使用 mobx-miniprogram-bindings 将 Store 和页面或组件进行绑定关联
如果需要在组件中使用状态，需要 mobx-miniprogram-bindings 库中导入 ComponentWithstore 方法
在使用时:需要将 Component 方法替换成 ComponentWithStore 方法,原本组件配置项也需要写到该方法中
在替换以后，就会新增一个 storeBindings 配置项，配置项常用的属性有以下三个：
1. store: 指定要绑定的 Store 对象
2. fields: 指定需要绑定的 data字段
3. actions: 指定需要映射的 actions 方法
// 如果需要在组件中使用 Store 中的数据以后方法
// 需要从 mobx-miniprogram-bindings 里面引入 Componentwithstore 方法
import { ComponentwithStore } from 'mobx-miniprogram-bindings'// 导入当前组件需要使用的 Store 对象
import{ numStore } from '../../stores/numstore'// 需要使用 ComponentwithStore 方法将 Component 方法进行替换
ComponentwithStore({// 用来配置当前组件需要与哪些Store进行关联storeBindings: {store: numStore, // 当前组件需要使用number store 这一个对象fields: ['numA', 'numB', 'sum'], // 当前组件需要使用这个sotre中的那些数据actions: ['update']}
})注意: 在从 Stroe 对象中引入数据和方法以后
- 如果是数据,会被注入到data对象中
- 如果是方法,会被注入到methods对象中
<view> {{ numA}} + {{ numB }} = {{sum}} </view>
<button type="warn" plain bindtap="update">更新 Store 中的数据</button>上面由于 update方法被注入到methods当中,所以可以在模版中直接调用
第一种:使用Component方法来构建页面组件中使用Store
方法和上面正常的使用方式是一样的
1.从 mobx-miniprogram-bindings 库中导入 ComponentWithStore 方法
2.将 Component 方法替换成 Componentwithstore 方法
3.然后配置 storeBindings 从Store 中映射数据和方法即可
第二种:不使用Component 方法构建页面组件中使用Store
- 这时候需要使用 mobx-miniprogram-bingings 提供的 Behaviorwithstore方法来和 Store 建立关联。
- Behaviorwithstore 定义在当前组件 or 页面根目录下 的 behavior.js中
- 我们去配置Behaviorwithstore 具体和哪些Store联系,供当前页面使用
小程序的behavior方法是一种代码复用的方式,可以将一些通用的逻辑和方法提取出来,然后在多个组件中复用,从而减少代码冗余,提高代码的可维护性。在页面中也可以使用 behaviors 配置项
使用方法:
1. 新建 behavior.js 文件,从 mobx-miniprogram-bindings 库中导入 BehaviorWithstore 方法
2.在BehaviorWithstore方法中配置 storeBindings 配置项从 Store 中映射数据和方法
3. 在 Page 方法中导入创建的 behavior ,然后配置 behavior 属性，并使用导入的 behavior
- 关联store初始化
- cart.js中注册(当前需要使用的页面注册)
- 注册完毕后会自动映射到data中,相当于已经取出了store中的内容放到data中了,可以直接调用
- 直接可以在页面中使用:
fields、actions 对象写法
fields、actions 有两种写法：数组 或者 对象。
我们之前使用的是 数组 的写法:
fileds: ['numA','numB','sum'],
actions: ['update']下面介绍一下对象的写法:
-
filelds的对象写法
- 映射写法
- 函数写法
fields: {// 两种写法:// 映射形式: 需要指定 data 中哪些字段来源于 store,以及 在 store 中的名字是什么numA: 'numA',numB: 'numA',numC: 'numA'// 函数形式// key: data 中哪些字段来源于 store// value: 函数, 函数内部需要返回对应 store 数据的值numA: () => numStore.numA,numB: () => numStore.numB,numC: () => numStore.numC,// 自定义属性// 如果对属性进行了自定义，模板中需要使用自定义以后的属性a: 'numA',b: 'numB',total: 'sum'
}在对象写法中可以通过自定义属性来重新命名,使用了自定义属性后,模版中的属性也必须对应自定义属性
-
action的对象写法:
- 映射写法
- 自定义属性
- 映射写法
actions:{// 如果将 actions 改成对象写法// actions 只有映射形式一种写法// 指定模板中使用的哪些方法来源于 store，并且在 store 中的名字是什么updateData: 'update
}
绑定多个组件以及命名空间
在实际开发中,一个页面或者组件可能会绑定多个 Store ,这时候我们可以将storeBindings 改造成数组。数组每一项就是一个个要绑定的 Store。
如果多个 Store 中存在相同的数据,显示会出现异常。还可以通过 namespace 属性给当前 Store 开启命名空间,在开启命名空间以后,访问数据的时候,需要加上 namespace 的名字才可以。
两者store中有变量或方法冲突了
有两种解决方式:
第一种: 将 fields 以及 actions 改成对象方式
第二种:添加命名空间
- 访问命名空间的数据
