小程序中的全局数据共享方案
在小程序中可以使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。
● mobx-miniprogram用来创建Store实例对象
● mobx-miniprogram-bindings用来把Store中的共享数据或方法,绑定到组件或页面中使用
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
注意:Mobx相关的包安装完毕之后,记得删除miniprogram_npm目录后,再进行npm重构。
创建Mobx的Store实例
创建一个文件夹,再创建一个js文件用来创建Store的实例对象。
![](https://i-blog.csdnimg.cn/blog_migrate/fd909e5d9a70abd8ac2118a049eb2094.png)
创建actions方法,用来修改store中的数据。
![](https://i-blog.csdnimg.cn/blog_migrate/aecbb227b73a695664f9c3f341ccea4f.png)
将Store中的成员绑定到页面中
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Page({
onLoad(options) {
this.storeBindings = createStoreBindings(this,{
store,
fields:['numA','numB','sum'],//需要拿的数据
actions:['updateNum1']//需要拿的方法
})
},
onUnload() {
this.storeBindings.detroyStoreBindings()
}
})
在页面上使用Store中的成员
页面内容
<!--pages/use_vant/use_vant.wxml-->
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA + 1</van-button>
<van-button type="danger" bindtap="btnHandler" data-step="{{-1}}">numA - 1</van-button>
btnHandler方法
btnHandler(e){
this.updateNum1(e.target.dataset.step)
}
将Store绑定到组件中
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Component({
//通过storeBindingsBehavior来实现绑定
behaviors:[storeBindingsBehavior],
storeBindings:{
store,
fields:{
numA:'numA',
numB:'numB',
sum:'sum'
},
actions:{
updateNum2:'updateNum2'
}
}
})
Store在组件中组件中使用
组件页面内容
<!--components/test/test.wxml-->
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB + 1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB - 1</van-button>
btnHandler2方法
btnHandler2(e){
this.updateNum2(e.target.dataset.step)
}