您现在的位置是:首页 >技术交流 >微信小程序TS项目使用mobx(页面直接使用store和自定义组件中使用store)网站首页技术交流
微信小程序TS项目使用mobx(页面直接使用store和自定义组件中使用store)
简介微信小程序TS项目使用mobx(页面直接使用store和自定义组件中使用store)
一、下载mobx相关包
npm i -S mobx-miniprogram mobx-miniprogram-bindings
注意:下载完成后,需要删除 miniprogram_npm 目录后,重新构建 npm。
二、创建是 MobX的store实例
注意:ts编写的话,方法中使用this,需要在参数中定义this: any,否则会提示错误
import { observable, action} from 'mobx-miniprogram'
export const store = observable({
numA: 1,
numB: 2,
get sum(){
return this.numA + this.numB;
},
updateNumA: action(function(this: any, step:number){
this.numA += step;
}),
updateNumB: action(function(this: any, step:number){
this.numB += step;
})
});
三、页面使用store
引入onLoad()方法中引入createStoreBindings将store上的方法和属性绑定到页面中
在unOnLoad()方法中销毁destroyStoreBindings()
// 引入store
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from "../../store/store"
Page({
data: {
},
handleNum(this:any, e:any){
this.updateNumA(e.target.dataset.step-0);
},
onLoad(this:any) {
this.storeBinding = createStoreBindings(this,{
store,
// fields:['numA','numB','sum'], //数组方式
fields:{
numA: 'numA',
numB: ()=> store.numB,
sum: (store:any) => store.sum
}, //对象形式
actions:['updateNumA']
});
},
onUnload(this:any){
this.storeBinding.destroyStoreBindings();
}
})
页面中使用:
<view>
{{numA}} + {{numB}} = {{sum}}
</view>
<van-button type="primary" bindtap="handleNum" data-step="1">update numA</van-button>
<van-button type="info" bindtap="handleNum" data-step="-1">update numA</van-button>
四、自定义组件中使用store
在自定义组件ts文件中引入ComponentWithStore,注意如果是TS必须使用ComponentWithStore,如果是js项目使用storeBindingsBehavior
// components/store-test/store-test.ts
// import { storeBindingsBehavior} from 'mobx-miniprogram-bindings'
// ts中使用mobx和js中不一样,js中使用storeBindingsBehavior,ts中使用ComponentWithStore
import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
ComponentWithStore({
storeBindings: {
store: store,
fields: ["numA", "numB", "sum"],
actions: {
updateNumB: "updateNumB",
},
},
/**
* 组件的方法列表
*/
methods: {
handleNumB(this:any, e:any){
console.log(this);
this.updateNumB(e.target.dataset.step-0);
},
}
})
自定义组件:
<van-button type="primary" bindtap="handleNumB" data-step="1">update numB</van-button>
<van-button type="info" bindtap="handleNumB" data-step="-1">update numB</van-button>
页面组引入自定义组件:
<view>
{{numA}} + {{numB}} = {{sum}}
</view>
<!-- 自定义组件中使用store -->
<store-test></store-test>
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。