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页面展示