文章目录

• 前言
• 一、MobX的使用
• • 1. 安装 MobX 相关的包
  • 2. 创建 MobX 的 Store 实例
  • 3.页面中使用Store成员
  • 4.组件中使用Store成员

前言

开发中经常会遇到组件共享数据的问题，在各种前端框架中都会有对应的全局共享组件，全局数据共享是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。

在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中：

• mobx-miniprogram 用来创建 Store 实例对象
• mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

一、MobX的使用

1. 安装 MobX 相关的包

在项目中运行如下的命令，安装 MobX 相关的包：

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

注意：MobX 相关的包安装完毕之后，记得删除 miniprogram_npm 目录后，重新构建 npm。

2. 创建 MobX 的 Store 实例

创建store.js用来创建store实例：

// 在这个 JS 文件中，专门来创建 Store 的实例对象
// ES6 的按需导入
import { observable, action } from 'mobx-miniprogram'// ES6 的导出语法
export const store = observable({// 数据字段numA: 1,numB: 2,// 计算属性get sum(){return this.numA + this.numB},// actions 函数，专门用来修改 store 中数据的值updateNum1: action(function (step) {this.numA += step}),updateNum2: action(function (step) {this.numB += step}),
})

3.页面中使用Store成员

<view>
{{numA}} +{{numB}} = {{sum}}
<button type="primary" bindtap="btn1" data-step="{{1}}">numA+1</button>
<button type="primary" bindtap="btn1" data-step="{{-1}}">numA-1</button>
</view>

// 页面的.js文件
import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "../../store/store";
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.storeBindings = createStoreBindings(this,{store,fields:['numA','numB','sum'],actions:['updateNum1']})},/*** 生命周期函数--监听页面卸载*/onUnload: function () {this.storeBindings.destroyStoreBindings()},btn1(e){this.updateNum1(e.target.dataset.step)}
})

​createStoreBindings​​​方法接收两个参数，一个是​​this​​代表当前页面的实例，第二参数是配置对象，包含三个属性：

• ​​store​​代表数据源
• ​​fields​​代表我们需要将哪些字段绑定到我们的页面中
• ​​actions​​代表我们需要将哪些方法绑定到我们的页面中

​​createStoreBindings​​​的调用有一个返回值，我们将这个返回值挂载到了当前页面上作为一个自定义属性storeBindings​​​而存在，这样我们就可以在页面卸载时利用​​storeBindings​​来清理挂载的Store实例

4.组件中使用Store成员

{{numA}}+{{numB}}={{sum}}
<button type="primary" bindtap="Cbtn1" data-step="{{1}}">CnumA+1</button>
<button type="primary" bindtap="Cbtn1" data-step="{{-1}}">CnumA-1</button>

// components/numbers/numbers.js
import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from '../../store/store'
Component({//通过storeBindingsBehavior来实现自动绑定behaviors:[storeBindingsBehavior],storeBindings:{//指定要绑定的Storestore,fields:{// 绑定字段的第1种方式numA:()=>store.numA,// 绑定字段的第2种方式numB:(store)=>store.numB,// 绑定字段的第3种方式sum:'sum'},actions:{updateNum2:'updateNum2'}},/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {Cbtn1(e){this.updateNum2(e.target.dataset.step)},}
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！