微信小程序全局数据共享学习笔记

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

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

1、安装 MobX 相关的包

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

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

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

2. 创建 MobX 的 Store 实例

新建store文件夹新建store.js

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

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

// pages/message/message.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']})},btnHandler1(e) {// console.log(e)this.updateNum1(e.target.dataset.step)},/*** 生命周期函数--监听页面卸载*/onUnload: function () {this.storeBindings.detroyStoreBindings()},
})

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

<!--pages/message/message.wxml-->
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">numA + 1</van-button>
<van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">numA - 1</van-button>

5. 将 Store 中的成员绑定到组件中

新建components文件夹新建numbers组件

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

6. 在组件中使用 Store 中的成员

<!--components/numbers/numbers.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>

微信小程序全局数据共享学习笔记相关推荐

微信小程序开发：学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]--页面跳转及传参页面跳转一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
微信小程序开发：学习笔记[9]——本地数据缓存
微信小程序开发:学习笔记[9]--本地数据缓存快速开始说明本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...
微信小程序-全局数据共享
微信小程序-全局数据共享MobX 1.开发中常用的数据共享方案为了解决组件之间的数据共享,开发中常用的数据共享方案有:Vuex/Redux/MobX等 2.小程序中全局数据共享方案-MobX ...
微信小程序入门教程学习笔记
写在前面: 作为一个刚刚入坑微信小程序的小白,以下是我在学习中的笔记,因为我真的太健忘了... 文章中可能会有错误,但是我会不断的修正的. 谢谢浏览,如有错误烦请指正 (≧∀≦)ゞ微信官方的小程序开 ...
微信小程序云开发学习笔记
(官网) 1.创建小程序选择云开发对应的环境在app.js中配置环境Id //app.js App({onLaunch: function () {if (!wx.cloud) {console. ...
微信小程序云开发 mysql_微信小程序云开发学习笔记（一）云数据库
云开发配置的环境:cloud-learning 云开发环境初始化准备需要: APPID 操作: 在创建项目时,填入APPID并选择不使用云函数进入到开发者页面,点击左上角的云开发并选择开通设置云 ...
微信小程序云开发学习笔记（二）云函数
一.创建一个云开发的小程序 1. 如下图所示创建小程序 2. 删除无关文件删除前: 删除后: 3. 删除无关代码 index.wxml index.wxss 内的代码全部清空,index.js保留如 ...
微信小程序全局数据共享 Mobx
1.首先安装MOBX 在项目所在目录下,右键选择[在外部终端窗口中打开],运行: npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram ...
微信小程序云开发学习笔记No.03——（文件存储）
上传文件 wx.cloud.uploadFile //回调风格的API上传文件,会返回一个uploadTask对象 const uploadTask = wx.cloud.uploadFile({cl ...

微信小程序全局数据共享学习笔记

1、安装 MobX 相关的包

2. 创建 MobX 的 Store 实例

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

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

5. 将 Store 中的成员绑定到组件中

6. 在组件中使用 Store 中的成员

微信小程序全局数据共享学习笔记相关推荐

最新文章

热门文章