目录
前言
Mobx是全局数据共享
,又叫做:状态管理
,可以解决小程序组件之间数据共享
的问题
-
在小程序中,可使用
mobx-miniprogram
配合mobx-miniprogram-bindings
实现全局数据共享。其中:-
mobx-miniprogram
用来创建Store
实例对象 -
mobx-miniprogram-bindings
用来把Store
中的共享数据或方法,绑定到组件或页面中使用
-
安装mobx
npm install --save mobx-miniprogram mobx-miniprogram-bindings
安装完不要忘记构建npm,这里默认大家都会哈
创建store仓库
我们在根目录下创建store文件夹然后建立store.js文件
我们在这个store.js文件进行状态仓库代码的编写
数据我们可以直接定义
计算属性使用get标记
方法使用action标记
详细代码如下:
import {
action,
observable
} from 'mobx-miniprogram'
export const store = observable({
num1: 1,
num2: 2,
get sum() {
return this.num1 + this.num2
},
updatanum1: action(function (res) {
this.num1 += res
}),
updatanum2: action(function (res) {
this.num2 += res
})
})
使用mobx
页面使用mobx
1.从'mobx-miniprogram-bindings'中引入createStoreBindings
2.引入sotre仓库
3.在onLoad钩子中使用
createStoreBindings方法接收两个参数
第一个参数当前wx实例,第二个参数是一个对象,对象中传入store仓库,
数据通过fields数据定义,方法通过actions数组定义
import {
createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
store
} from '../../store/store'
onLoad(options) {
this.storeBindings = createStoreBindings(this, {
store,
fields: ['num1', 'num2', 'sum'],
actions: ['updatanum1','updatanum2']
})
},
组件使用mobx
1.从'mobx-miniprogram-bindings'引入storeBindingsBehavior
2.引入sotre仓库
3.在component中的behaviors中注册createStoreBindings
4.在storeBindings中传入store仓库
数据通过fields数据定义,方法通过actions数组定义
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Component({
behaviors:[storeBindingsBehavior],
storeBindings:{
store,
fields:['num1','num2','sum'],
actions:['updatanum2','updatanum1']
},
})
页面和组件的引入和使用区别
都是从mobx-miniprogram-bindings中引入,并引入store仓库
但页面引入的是createStoreBindings,组件引入的是storeBindingsBehavior
页面是在onLoad钩子中通过createStoreBindings使用注册,并挂在vx实例上的storeBindings上
组件是在behaviors中注册,然后在storeBindings中使用