微信小程序数据共享
文章目录
- 安装 mobx
- 创建 Store 实例
- 在页面中使用 Store
- 页面挂载
- 页面使用
- 在组件中使用 Store
- 组件挂载
- 组件使用
1.安装 mobx
1.1. 在项目的根目录下 打开 cmd 安装
npm i --save mobx-miniprogram mobx-miniprogram-bindings
1.2. 安装完 重新构建 npm
在工具下的 构建 npm
注意 构建前 先把之前的 构建成功的 删除
2.创建 Store 实例
import { observable, action } from "mobx-mimiprogram"
export default observable({
// 数据
numA: 10,
numB: 20,
// 计算属性
get sum () {
return this.numA + this.numB
},
// action 方法 用来修改 store 中的数据
setNumA: action(function (value) {
this.numA = value
}),
setNumB: action(function (value) {
this.numB = value
})
})
3. 在页面中使用 Store
3.1 页面挂载
import { createStoreBindings } from "mobx-mimiprogram-bindings"
import { store } from "store/index"
Page ({
// 页面挂载
onLoad() {
this.storeBindings = createStoreBindings (this, {
store,
fields: ["numA", "numB", "sum"],
actions: ["setNumA", "setNumB"]
})
},
// 页面挂载时 卸载 Store
ouUnload() {
this.storeBindings.destroyStoreBindings()
}
})
3.2 页面使用
<!-- 在页面中和 data 数据一样 直接使用即可 -->
<view bindtap="btn" data-value={{100}}>{{sum}}</view>
// 在逻辑中通过 this 直接获取即可
Page({
btn(e) {
this.setNumA(e.target.dataset.value)
}
})
4. 在组件中使用 Store
4.1 组件挂载
import { storeBindsBehavior} from "mobx-mimiprogram-bindings"
import { store } from "store/index"
Component({
behaviors: [storeBindsBehavior],
storeBindings: {
store,
fields: {
numA: "numA",
numB: "numB",
sum: "sum"
},
actions: {
setNumA: "setNumA",
setNumB: "setNumB"
}
}
})
4.2 组件使用
<!-- 在页面中和data数据一样 直接使用即可 -->
<view bindtap="btn" data-value={{100}}>{{sum}}</view>
// 在逻辑中通过 this 直接获取即可
Page({
btn(e) {
this.setNumA(e.target.dataset.value)
}
})
组件使用和页面一样