微信小程序小程序全局数据共享(笔记)

文章目录

1. 安装 mobx
2. 创建 Store 实例
3. 在页面中使用 Store
- 3.1 页面挂载
- 3.2 页面使用
4. 在组件中使用 Store
- 4.1 组件挂载
- 4.2 组件使用

1. 安装 mobx

在小程序中可以安装 mobx 实现全局数据共享，需要 npm 下载两个包

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

在微信小程序中使用 npm 下载包，需要在工具中点击构建 npm，还需要在本地设置中勾选使用 npm 模块

2. 创建 Store 实例

// store/index.js
import { observable, action } from "mobx-miniprogram"export default observable({// 数据numA: 10,numB: 20,// 计算属性 get sum(){return this.numA + this.numB},// action 方法，用来修改 store 中的数据setNumA: action(function (value) {this.numA = value}),setNumB: action(function (value) {this.numB = value})
})

3. 在页面中使用 Store

3.1 页面挂载

import { createStoreBindings } from "mobx-miniprogram-bindings"
import { store } from "store/index"Page({// 页面加载时挂载 StoreonLoad() {this.storeBindings = createStoreBindings(this, {store,fields: ["numA", "numB", "sum"],actions: ["setNumA", "setNumB"]})},// 页面卸载时卸载 StoreonUnload() {this.storeBindings.destroyStoreBindings()}
})

3.2 页面使用

<!-- 在页面中和 data 数据一样，直接使用即可 -->
<view bindtap="btn" data-value={{100}}>{{sum}}</view>

// 在逻辑中通过 this 直接获取即可
Page({btn(e){this.setNumA(e.target.dataset.value)}
})

4. 在组件中使用 Store

4.1 组件挂载

import { storeBindsBehavior } from "mobx-miniprogram-bindings"
import { store } from "store/index"Component({behaviors: [storeBindsBehavior],storeBindings: {store,fields: {numA: "numA",numB: "numB",sum: "sum"},actions: {setNumA: "setNumA",setNumB: "setNumB"}}
})

4.2 组件使用

组件的使用和页面一样

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

【微信小程序】——Mobx全局数据共享和分包
微信小程序开发全局数据共享 1. 全局数据共享介绍 2. 小程序中的全局数据共享方案 3. 安装Mobx相关的包 4. 创建Mobx中Store实例 5. 页面中使用Store成员 6. 组件中使用 ...
微信小程序学习笔记(五) npm包+全局数据共享+分包
文章目录 1. 使用npm包 1.1 小程序对 npm 的支持与限制 1.2 Vant Weapp 组件库 1.2.1 安装 Vant 组件库 1.2.2 使用 Vant 组件 1.2.3 定制全局主 ...
微信小程序开发学习6（基础加强之使用npm包和全局数据共享及分包【Tab底栏案例改进】）
微信小程序开发学习6(基础加强之使用npm包和全局数据共享及分包) 1.使用npm包小程序对npm包的支持目前,小程序中已经支持使用p安装第三方包,从而来提高小程序的开发效率.但是,在小程序中使用 ...
微信小程序五 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.小程序中的全局数据共享方案在 ...
微信小程序——API promise化，全局数据共享，MobX，将Stroe中的成员绑定到页面中，在页面上使用Strore中的成员
一.API promise化 1．基于回调函数的异步 API 的缺点默认情况下,小程序官方提供的异步 API 都是基于回调函数实现的,例如,网络请求的 API 需要按照如下的方式调用: 缺点:容易造 ...
小程序基础入门(黑马学习笔记)
一.宿主环境--组件 1.scroll-view(滚动效果) scroll-y 属性:允许纵向滚动 scroll-x 属性:允许横向滚动注意:使用竖向滚动时,必须给scroll-view 一个固定高 ...
微信小程序全局数据共享学习笔记
在小程序中,可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享.其中: mobx-miniprogram 用来创建 Store 实例对 ...

微信小程序小程序全局数据共享(笔记)

文章目录

1. 安装 mobx

2. 创建 Store 实例

3. 在页面中使用 Store

3.1 页面挂载

3.2 页面使用

4. 在组件中使用 Store

4.1 组件挂载

4.2 组件使用

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

最新文章

热门文章

微信小程序 小程序全局数据共享(笔记)

文章目录

1. 安装 mobx

2. 创建 Store 实例

3. 在页面中使用 Store

3.1 页面挂载

3.2 页面使用

4. 在组件中使用 Store

4.1 组件挂载

4.2 组件使用

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

最新文章

热门文章

微信小程序小程序全局数据共享(笔记)

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