1.概念
全局数据共享(又叫做：状态管理)是为了解决组件之间数据共享的问题。
2.小程序中共享方案
在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享mobx-miniprogram用来创建Store实例对象
mobx-miniprogram-bindings用来把Store中的共享数据或方法，绑定到组件或页面中使用
3.Mobx相关的包
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
4.将store中的成员绑定到页面中
4.1创建store.js
// 创建store实例对象
// 引入observable是定义store的包,action是定义修改store数据的包
import {
observable,
action
} from "mobx-miniprogram"
// 通过observalbe方法就可以创建store
export const store = observable({
// 数据字段-共享的数据
numA: 1,
numB: 2,
// 计算属性 get代表就是只读的
get sum() {
return this.numA + this.numB
},
// action方法，用来修改store中的数据(外界数据是不能更改的)
// action方法包裹方法才行
updateNum1: action(function (step) {
this.numA += step
}),
updateNum2: action(function (step) {
this.numB += step
})
})4.2.页面js文件
// 这个函数用于将 MobX store 绑定到小程序的页面
import {createStoreBindings} from "mobx-miniprogram-bindings"
// 引入store
import {store} from "../../store/store"
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// this指的是当前页面，当函数执行完成后，有一个返回值，挂在在页面上，作为属性
// {包含是三个属性}
// store数据源,fields需要的字段或者属性，绑定在页面上,actions保存需要的方法
this.storeBindings= createStoreBindings(this,{store,
fields:['numA','numB','sum'],
actions:['updateNum1']
})
},4.3contact.wxml文件
<!--pages/contact/contact.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>4.4contact.js文件
btnHandler(e){
this.updateNum1(e.target.dataset.step)
},4.5页面展示
5. 将store中的成员绑定到组件中
5.1组件的js
import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from "../../store/store"
behaviors:[storeBindingsBehavior],
storeBindings:{
//数据源
store,
fields:{
//映射关系
numA:"numA",
numB:"numB",
sum:"sum"
},
actions:{
updateNum2:"updateNum2"
}
},5.2组件的wxml文件
<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numA+1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numA-1</van-button>
5.3 组件js文件
methods: {
btnHandler2(e){
this.updateNum2(e.target.dataset.step)
}
}5.4页面展示
文章来源地址https://www.toymoban.com/news/detail-511424.html
文章来源：https://www.toymoban.com/news/detail-511424.html
到了这里，关于微信小程序全局数据共享的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
