微信小程序数据共享

微信小程序数据共享

文章目录

1. 安装 mobx
2. 创建 Store 实例
3. 在页面中使用 Store
   • 页面挂载
   • 页面使用
4. 在组件中使用 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)
	}
		
})

组件使用和页面一样