微信小程序中的vuex(MobX)
相信大家可能在vue项目中通过vuex来实现各种项目的数据的存储,以及实现多组件,多页面之间的通信,然后,后面开始接触小程序开发,以后站在vue角度上很好解决的问题,在微信小程序中就犯了难,如果想要了解微信小程序之间的通信可以去看我之前的文章,微信小程序中的数据传值,今天主要给大家分享一波微信小程序中Mobx的使用,类似vuex的状态管理工具。一、安装所需配置(mobx-miniprogram和m
·
相信大家可能在vue项目中通过vuex来实现各种项目的数据的存储,以及实现多组件,多页面之间的通信,然后,后面开始接触小程序开发,以后站在vue角度上很好解决的问题,在微信小程序中就犯了难,如果想要了解微信小程序之间的通信可以去看我之前的文章,微信小程序中的数据传值,今天主要给大家分享一波微信小程序中Mobx的使用,类似vuex的状态管理工具。
一、安装所需配置(mobx-miniprogram
和 mobx-miniprogram-bindings
)
npm install --save mobx-miniprogram mobx-miniprogram-bindings
二、搭建MobX Store管理仓库
// store.js 引入所需配置
import { observable, action } from "mobx-miniprogram";
//创建仓库
export const store = observable({
// 数据字段
numA: 1,
numB: 2,
// 计算属性 数据改变时会执行,vue中的计算属性,返回sum这个变量
get sum() {
return this.numA + this.numB;
},
// actions 方法用于改变仓库的值
update: action(function () {
const sum = this.sum;
this.numA = this.numB;
this.numB = sum;
}),
});
三、在 Component 构造器中使用:
//引入相关配置
import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
//引入组件库
import { store } from "./store";
Component({
behaviors: [storeBindingsBehavior],
data: {
someData: "...",
},
storeBindings: {
store,
//对应值,页面显示值
fields: {
numA: () => store.numA,
numB: (store) => store.numB,
sum: "sum",
},
//触发方法
actions: {
buttonTap: "update",
},
},
methods: {
myMethod() {
//获取仓库值
this.data.sum; // 来自于 MobX store 的字段
},
},
});
四、在 Page 构造器中使用:
如果小程序基础库版本在 2.9.2 以上,可以直接像上面 Component 构造器那样引入 behaviors 。
如果需要比较好的兼容性,可以使用下面这种方式(或者直接改用 Component 构造器来创建页面)。
import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "./store";
Page({
data: {
someData: "...",
},
onLoad() {
this.storeBindings = createStoreBindings(this, {
store,
fields: ["numA", "numB", "sum"],
actions: ["update"],
});
},
onUnload() {
this.storeBindings.destroyStoreBindings();
},
myMethod() {
this.data.sum; // 来自于 MobX store 的字段
},
});
五、Typescript 支持
从 2.1.2
版本开始提供了简单的 TypeScript
支持。
新增两个构造器 API
,推荐优先使用下列新版接口,你也可以继续使用旧版接口,详见接口说明。
ComponentWithStore
import { ComponentWithStore } from "mobx-miniprogram-binding";
ComponentWithStore({
options: {
styleIsolation: "shared",
},
data: {
someData: "...",
},
storeBindings: {
store,
fields: ["numA", "numB", "sum"],
actions: {
buttonTap: "update",
},
},
});
BehaviorWithStore
import { BehaviorWithStore } from "mobx-miniprogram-binding";
export const testBehavior = BehaviorWithStore({
storeBindings: {
store,
fields: ["numA", "numB", "sum"],
actions: ["update"],
},
});
了解更多请看 mobx
更多推荐
已为社区贡献12条内容
所有评论(0)