什么是全局数据共享:
全局数据共享(又叫做:状态管理),是为了解决组件之间数据共享的问题
开发中常用的全局数据共享方案有:Vuex,Redux,Mobx等
小程序中的全局数据共享方案:
在小程序中,可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享,其中:
mobx-miniprogram
用来创建Store示例对象mobx-miniprogram-bindings
用来把Store中的共享数据或方法,绑定到组件或页面中使用安装Mobx相关的包:
npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
注意:安装完相关的包之后,记得删除miniprogram_npm目录后.重新构建npm
使用:
在项目目录下创建stroe文件夹,并创建对应的js文件:
在js文件中导出store:
// 在这个js文件中专门用来创建store实例对象
import {observable} from 'mobx-miniprogram'
export const store=observable({})
创建Mobx的stroe实例:
// 在这个js文件中专门用来创建store实例对象
import {
action,
observable
} from 'mobx-miniprogram'
export const store = observable({
// 数据字段:
num1: 123,
num2: 321,
step: 2,
// 计算属性:
get sum() {
return this.num1 + this.num2
},
// actions
updateNum1: action(function () {
this.num1 += step
}),
updateNum2: action(function () {
this.num2 += step
}),
})
将store中的成员绑定到页面中:
在页面的js中:
//页面的监听js文件
import {
createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
store
} from '../../store/store'
Page({
onLoad: function () {
// 监听页面加载
this.storeBindings = createStoreBindings(this, {
store,
fields: ['num1', 'num2', 'sum'],
actions: ['updateNum1', 'updateNum2']
})
},
onUnload: function () {
// 生命周期函数,监听页面卸载
this.storeBindings.destroyStoreBindings()
},
})
此时可以看下数据是否已经计算:
将store中的fun绑定到页面中:
{{num1}}+{{num2}}={{sum}}
num1+1
num1-1
// index.js
// 获取应用实例
const app = getApp()
//页面的监听js文件
import {
createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
store
} from '../../store/store'
Page({
onLoad: function () {
// 监听页面加载
this.storeBindings = createStoreBindings(this, {
store,
fields: ['num1', 'num2', 'sum'],
actions: ['updateNum1', 'updateNum2']
})
},
btnHandler1(e) {
this.updateNum1(e.target.dataset.step)
},
onUnload: function () {
// 生命周期函数,监听页面卸载
this.storeBindings.destroyStoreBindings()
},
})
store.js中有不同的写法,示例可以查看下面:
在组件中引入store时,可以映射store中对应的对象或者变量名,如下面的behaviors
,storeBindings
和actions
:
// pages/mynumber/mynumber.js
import {
storeBindingsBehavior
} from "mobx-miniprogram-bindings"
import {
store
} from "../../store/store"
Component({
behaviors: [storeBindingsBehavior],
storeBindings:{
// 数据源
store,
fields:{
// 映射名:'组件中的变量名',可以简写
num1:'num1',
num2:'num2',
sum:'sum'
},
//store中的function需要在actions下映射,这里也可以简写的
actions:{
updateNum1:'updateNum1'
}
},
})