全局数据共享——MobX（微信小程序）

1. 定义：全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有：Vuex、Redux、MobX 等。而我们微信小程序常用的全局共享方案是：MobX

我们可以通过上面这张图清除的看到，如果不使用MobX全局数据共享的话，如果需要调用某个组件，则需要一层一层调用，如果定义了全局数据共享，那么可以直接拿到数据，不需要一层一层调用

2.全局数据共享的具体方案

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

mobx-miniprogram 用来创建 Store 实例对象

mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

3. 使用

①通过npm安装MobX相关的包

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

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

先在项目目录下删除miniprogram_npm 目录，然后通过如下图重新构建npm

②创建MobX的store实例

在根目录下新建store文件夹，然后在store文件夹下创建store.js文件

如图：

然后在store.js中编写如下代码：

//在这个JS文件中，专门用来创建 Store 的实例对象
import {action, observable} from 'mobx-miniprogram'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}),})

③. 将 Store 中的成员绑定到页面中

//先引入import {createStoreBindings
} from 'mobx-miniprogram-bindings'
import {store
} from '../../store/store'Page({/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.storeBindings = createStoreBindings(this, {store,fields: ['numA', 'numB', 'sum'],actions: ['updateNum1']})},/*** 生命周期函数--监听页面卸载*/onUnload: function () {this.storeBindings.detroyStoreBindings()},
})

④. 在页面上使用 Store 中的成员

//页面.wxml结构<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler" data-step="{{1}}">numA+1</van-button>
<van-button type="danger" bindtap="btnHandler" data-step="{{-1}}">numA-1</van-button>//按钮tap事件处理函数
btnHandler(e) {this.updateNum1(e.target.dataset.step)},

4.在组件中使用

在组件.js文件中引入，将Store绑定到组件中：

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from "../../store/store"
Component({behaviors:[storeBindingsBehavior],storeBindings:{//数据源store,fields:{numA:'numA',numB:'numB',sum:'sum'},actions:{updataNum2:'updateNum2'}},/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}}
})

接下来在组件.wxml结构中使用

//组件.wxml结构<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numB+1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numB-1</van-button>/*** 组件的方法列表*/methods: {btnHandler2(e){this.updataNum2(e.target.dataset.step)}}

全局数据共享——MobX（微信小程序）相关推荐

【微信小程序】——Mobx全局数据共享和分包
微信小程序开发全局数据共享 1. 全局数据共享介绍 2. 小程序中的全局数据共享方案 3. 安装Mobx相关的包 4. 创建Mobx中Store实例 5. 页面中使用Store成员 6. 组件中使用 ...
微信小程序——API promise化，全局数据共享，MobX，将Stroe中的成员绑定到页面中，在页面上使用Strore中的成员
一.API promise化 1．基于回调函数的异步 API 的缺点默认情况下,小程序官方提供的异步 API 都是基于回调函数实现的,例如,网络请求的 API 需要按照如下的方式调用: 缺点:容易造 ...
微信小程序开发学习6（基础加强之使用npm包和全局数据共享及分包【Tab底栏案例改进】）
微信小程序开发学习6(基础加强之使用npm包和全局数据共享及分包) 1.使用npm包小程序对npm包的支持目前,小程序中已经支持使用p安装第三方包,从而来提高小程序的开发效率.但是,在小程序中使用 ...
微信小程序学习笔记(五) npm包+全局数据共享+分包
文章目录 1. 使用npm包 1.1 小程序对 npm 的支持与限制 1.2 Vant Weapp 组件库 1.2.1 安装 Vant 组件库 1.2.2 使用 Vant 组件 1.2.3 定制全局主 ...
微信小程序五 npm 包、安装 vant组件、promise组件、全局数据共享、分包！！！、自定义 tabBar 案例
总结能够知道如何安装和配置 vant-weapp 组件库参考 Vant 的官方文档能够知道如何使用 MobX 实现全局数据共享安装包.创建 Store.参考官方文档进行使用能够知道如何对小程 ...
微信小程序（五）--- Vant组件库，API Promise化，MboX全局数据共享，分包相关
目录一.npm包 1.Vant Weapp (1)安装Vant组件库 (2)使用Vant组件 (3)定制全局主题样式 2.API Promise化 (1)基于回调函数的异步API的缺点 (2)API ...
【微信小程序】全局数据共享
1.1.什么是全局数据共享全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题.开发中常用的全局数据共享方案有:Vuex.Redux.MobX等. 1.2.小程序中的全局数据共享方案在 ...
微信小程序-------全局通信方案mobx
微信小程序-------全局通信方案mobx 微信小程序本身并没有提供类似于vue中的vuex或者React里的Redux这样的全局通信方案,只在组件中有behaviors这样的属性共享机制,用起来也 ...
微信小程序全局路由拦截
前言略微信小程序全局路由拦截方法1 目前微信小程序没有全局路由拦截.要想实现全局路由拦截,需要自己进行扩充.具体参考这里:微信小程序–路由拦截器. 实现思路: 替换Page的参数对象的onShow ...
微信小程序进阶学习笔记Day05
学习目标:微信小程序基础Day05 今日目标: 能够知道如何安装和配置 vant-weapp 组件库能够知道如何使用 MobX 实现全局数据共享能够知道如何对小程序的 API 进行Promise ...

全局数据共享——MobX（微信小程序）

全局数据共享——MobX（微信小程序）相关推荐

最新文章

热门文章