微信小程序-全局数据共享MobX

1.开发中常用的数据共享方案

为了解决组件之间的数据共享，开发中常用的数据共享方案有：Vuex/Redux/MobX等

2.小程序中全局数据共享方案-MobX

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

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

3.安装及使用

3.1安装

命令如下：

npm install  --save  mobx-miniprogram@版本  mobx-miniprogram-bindings@版本

注意：重新构建npm

3.2 全局数据共享实例

在根目录下创建store/store.js，专门用来创建Store实例

// 在这个 JS 文件中，专门来创建 Store 的实例对象
//按需引入，observable专门用来创建store对象
import { observable, action } from 'mobx-miniprogram'export const store = observable({//共享数据 的 数据字段numA: 1,numB: 2,// 计算属性,get表示只读，只能获取，无法重新赋值get sum() {return this.numA + this.numB},// actions 函数，专门来修改 store 中数据的值，里面是一个函数updateNum1: action(function (step) {this.numA += step}),updateNum2: action(function (step) {this.numB += step})
})

3.3 绑定到页面

在页面的.js文件中，写如下代码

//导入createStoreBindings，用来把共享的数据或方法，绑定到组件或页面中使用
import { createStoreBindings } from 'mobx-miniprogram-bindings'
// 导入store
import { store } from '../../store/store'Page({/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//将store/fileds-数据/actions-方法 绑定给thisthis.storeBindings = createStoreBindings(this, {store,fields: ['numA', 'numB', 'sum'],actions: ['updateNum1']})},//普通方法的定义btnHandler1(e) {// e.target.dataset是固有属性，保存传来的step// 对应的wxml--<button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA + 1<button> data-step属性表示this.updateNum1(e.target.dataset.step)},/*** 生命周期函数--监听页面卸载*/onUnload: function () {//销毁绑定this.storeBindings.detroyStoreBindings()}})

3.4 绑定到组件

3步：引入、挂载、绑定

//引入 storeBindingsBehavior
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
//引入 store
import { store } from '../../store/store'Component({//将storeBindingsBehavior挂载到behaviors上behaviors: [storeBindingsBehavior],storeBindings: {// 数据源store,//指定要绑定的storefields: {numA: ()=>store.numA,//绑定字段的第1种方式numB: (store)=>store.numB,//绑定字段的第2种方式sum: 'sum'//绑定字段的第3种方式},//方法actions: {//指定要绑定的方法updateNum2: 'updateNum2'}},/*** 组件的方法列表*/methods: {btnHandler2(e) {this.updateNum2(e.target.dataset.step)}}
})

微信小程序-全局数据共享相关推荐

微信小程序全局数据共享学习笔记
在小程序中,可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享.其中: mobx-miniprogram 用来创建 Store 实例对 ...
微信小程序全局数据共享 Mobx
1.首先安装MOBX 在项目所在目录下,右键选择[在外部终端窗口中打开],运行: npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram ...
微信小程序----全局状态管理 (便于全局埋点等操作)
说明由于我是一个有着一颗玻璃心的博主,导致在2018年后博客很少更新.原因是由于我的分享并没有解决到部分人的问题,而导致被骂了.当时这颗玻璃心就碎了,所以这两年以来很是消极,博客很少更新.这里给那些 ...
微信小程序-------全局通信方案mobx
微信小程序-------全局通信方案mobx 微信小程序本身并没有提供类似于vue中的vuex或者React里的Redux这样的全局通信方案,只在组件中有behaviors这样的属性共享机制,用起来也 ...
逆战之微信小程序全局配置
微信小程序之全局配置-1 小程序的配置分为全局配置.页面配置及sitemap 配置全局配置小程序根目录下的 app.json 文件用来对微信小程序进行全局配置.文件内容为一个 JSON 对象,有以 ...
php小程序开发实例,微信小程序全局配置开发实例
本文主要和大家分享微信小程序全局配置开发实例,主要以代码的形式和大家分享,希望能帮助到大家. 一.app.json 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设 ...
微信小程序全局路由拦截
前言略微信小程序全局路由拦截方法1 目前微信小程序没有全局路由拦截.要想实现全局路由拦截,需要自己进行扩充.具体参考这里:微信小程序–路由拦截器. 实现思路: 替换Page的参数对象的onShow ...
微信小程序全局路由拦截
1. 微信小程序全局路由拦截 // utils/filter.js function loginCheck(pageObj) {if (pageObj.onLoad) {let _onLoad = ...
微信小程序全局配置文件app.json中window:backgroundColor“不生效”
那些年我们一起踩过的坑~ 今天说一下微信小程序全局配置文件app.json中window的backgroundColor属性,设置之后发现没效果. 查了资料发现原来这个backgroundColor属 ...

微信小程序-全局数据共享

微信小程序-全局数据共享MobX

1.开发中常用的数据共享方案

2.小程序中全局数据共享方案-MobX

3.安装及使用

微信小程序-全局数据共享相关推荐

最新文章

热门文章