查看小程序根目录中是否存在package.json文件
在项目根目录运行cmd
没有package.json文件输入npm init -y初始化一下,初始化一个包管理
安装MobX
npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
小程序菜单栏工具–构建npm
根目录创建store文件夹,在文件夹下新建store.js ,这个文件是专门用来创建store的实例对象
import {observable} from 'mobx-miniprogram'
export const store = observable({
userid: 123,
username: 'as',
numA: 1,
numB: 2,
// 计算属性
get sum() {
return this.numA + this.numB
},
// action方法,用来修改store中数据
UpdateNum1: action(function (step) {
this.numA += step
}),
UpdateNum2: action(function (step) {
this.numB += step
})
})
在页面使用store数据
.js文件
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
//在onload生命周期中挂载
onLoad: function (options) {
this.storeBindings = createStoreBindings(this, {
store,
// 数据以及计算属性放fields里
fields: ['numA', 'numB', 'userid', 'username', 'sum'],
actions: ['UpdateNum1', 'UpdateNum2']
})
},
//在onUnload中清理
onUnload: function () {
// 数据清理
this.storeBindings.destroyStoreBindings()
},
此时可以在页面中用{{}}使用store中的数据
<view>userid：{{userid}}</view>
<view>username：{{username}}</view>
使用store中的action方法
页面绑定一个方法,并且使用data-*进行传参
<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button bindtap="change" data-newA="{{1}}">numA+1</van-button>
<van-button bindtap="change" type='warning' data-newA="{{-1}}">numA-1</van-button>
在js中使用
change(e) {
console.log(e);
const newA = e.target.dataset.newa
this.UpdateNum1(newA)
},
打印
点击之后就可以是页面数据+1或者-1
在组件中使用store中的数据
在根目录中新建components文件夹,在文件夹下新增number文件夹,
在number文件夹下右键点击新增component,然后命名,会自动生成四个同名文件
在组件的js文件中引入
// components/numbers/numbers.js
import { storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
//在Component中挂载
Component({
// 通过storeBindingsBehavior来实现自动绑定
behaviors: [storeBindingsBehavior],
storeBindings: {
// 数据源
store,
//fields中写store中的数据以及计算属性
fields: {
// 前面是映射到组件中的名字,可以自定义,也可以填写一致
//后面是store中的名字,字符串形式
n1: 'numA',
n2: 'numB',
sumCount: 'sum'
},
//actions写store中的action方法
actions: {
UpdateNum2: 'UpdateNum2'
}
},
})
页面中{{}}来使用store中的数据
页面绑定一个方法,并且使用data-*进行传参
<!-- 组件中使用store数据 -->
<view>{{n1}}+{{n2}}={{sumCount}}</view>
<van-button bindtap="HandelNum" data-newB="{{1}}">numB+1</van-button>
<van-button bindtap="HandelNum" type='warning' data-newB="{{-1}}">numB-1</van-button>
在组件js文件中定义HandelNum方法
Component({
/**
* 组件的方法列表写在Component中的methods下
*/
methods: {
HandelNum(e) {
console.log(e);
this.UpdateNum2(e.target.dataset.newb)
}
}
})
文章来源：https://www.toymoban.com/news/detail-569424.html
在页面中使用该组件
- 在app.json中定义全局组件
"usingComponents": {
"my-numbers": "/components/numbers/numbers"
"van-button": "@vant/weapp/button/index"
}
- 在页面中使用组件
<my-numbers></my-numbers>
3. 点击按钮可实现数据+1 -1
文章来源地址https://www.toymoban.com/news/detail-569424.html
到了这里，关于小程序MobX创建store并实现全局数据共享的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
