微信小程序全局数据共享

文章目录

  • 安装MobX相关的包
  • 根目录创建store文件夹,添加store.js文件
  • 绑定到页面中
  • 绑定到组件

mobx-miniprogram和mobx-miniprogram-bindings实现全局数据共享

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

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

安装MobX相关的包

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

注意:MobX相关的包安装完毕之后,记得删除miniprogram_npm目录后,在选项中重新构建npm。

根目录创建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},//修改updateNum1:action(function(step){this.numA += step}),updateNum2:action(function(step){this.numB += step}),
})

绑定到页面中

//页面的.js文件
import{createStoreBindings } from'mobx-miniprogram-bindings'//绑定方法
import{store}from'../../store/store'//实例对象映射到当前页面Page({onLoad:function(){//生命周期函数--监听页面加载//第一个参数this代表该页面实例,第二个参数「store,fields,actios」分别代表数据源,字段,方法//自定义属性storeBindings为createStoreBindings方法的返回值this.storeBindings = createStoreBindings(this,{store,fields:['numA','numB','sum'],actions:['updateNum1']
})
},
onUnload:function(){//生命周期函数--监听页面卸载//清理绑定的数据和方法this.storeBindings.destroyStoreBindings()
}

绑定到组件

//组件的.js文件
import{storeBindingBehavior} from'mobx-miniprogram-bindings'//绑定方法
import{store}from'../../store/store'//实例对象映射到当前组件Compoent({behaviors:[storeBindingsBehavior],//通过storeBindingsBehavior来实现自动绑定storeBindings:{store,//指定要绑定的Storefields:{//指定要绑定的字段数据numA:()=>store.numA,//绑定字段的第一种方式numB:()=>store.numA,//绑定字段的第二种方式sum:'sum'           //绑定字段的第三种方式},actions:{//指定要绑定的方法updateNum2:"updateNum2"}},
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/768318.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

树状数组原理和代码

树状数组 求下标的对应 求i管着的下标的范围 方法:拆掉最右侧的1然后1 到你自己 query sum 1-i的和 拆掉最右侧的1 再把下一个数值吸收到sum 重复这个过程直到全变0为止 add 方法:加上最右侧的1 到上限为止 lowbit方法 单点增加范围查询模板 #inc…

no main manifest attribute, in xxx.jar

找不到主类&#xff0c;如果是maven 项目&#xff0c;在pom.xml 指定主类 <mainClass>com.example.demo.Demo2Application</mainClass>还是不行的话&#xff0c;把 <skip>true</skip>去掉

请简单介绍一下Shiro框架是什么?Shiro在Java安全领域的主要作用是什么?Shiro主要提供了哪些安全功能?

请简单介绍一下Shiro框架是什么&#xff1f; Shiro框架是一个强大且灵活的开源安全框架&#xff0c;为Java应用程序提供了全面的安全解决方案。它主要用于身份验证、授权、加密和会话管理等功能&#xff0c;可以轻松地集成到任何Java Web应用程序中&#xff0c;并提供了易于理解…

nodejs+vue高校师资管理系统python-flask-django-php

快速发展的社会中&#xff0c;人们的生活水平都在提高&#xff0c;生活节奏也在逐渐加快。为了节省时间和提高工作效率&#xff0c;越来越多的人选择利用互联网进行线上打理各种事务&#xff0c;然后线上管理系统也就相继涌现。与此同时&#xff0c;人们开始接受方便的生活方式…

从FasterTransformer源码解读开始了解大模型(1.0)了解FasterTransformer

从FasterTransformer源码解读开始了解大模型&#xff08;1.0&#xff09;了解FasterTransformer 写在前面的话 最近的一年时间真是令人感慨&#xff0c;换了个工作方向&#xff0c;学了些深度算子开发相关知识&#xff0c;工作也转到对LLM的学习和开发了。入行不算深&#xf…

【Node.js】markdown 转 html

markdown 转 html 需要先安装三个包&#xff1a;browser-sync&#xff0c;ejs&#xff0c;marked 第一步&#xff0c;先准备一个 ejs 模板&#xff1a; <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title><% title %>…

谷粒商城——缓存的概念

1. 使用缓存的好处&#xff1a;减少数据库的访问频率&#xff0c;提高用户获取数据的速度。 2. 什么样的数据适合存储到缓存中&#xff1f; ①及时性、数据一致性要求不高的数据&#xff0c;例如物流信息、商品类目信息 ②访问量大更新频率不高的数据(读多、写少) 3. 读模式…

PyTorch中用torch.block_diag()将多个矩阵沿对角线拼接成一个大矩阵的函数

torch.block_diag()是PyTorch中用于将多个矩阵沿对角线拼接成一个大矩阵的函数。这个函数可以用于构建卷积神经网络中的卷积核矩阵&#xff0c;或者构建变分自编码器等需要对多个线性变换进行堆叠的模型。 torch.block_diag()函数的语法如下&#xff1a; torch.block_diag(*a…

加密技术概述

传输数据时的四个问题 窃听 数字加密 假冒 消息认证或数字签名 篡改 消息认证码或数字签名 事后否认 数字签名 加密技术 将数据变成第三者的计算机无法理解的形式&#xff0c;然后再将其恢复成原本数据的一系列操作就是加密技术。 哈希函数 哈希函数可以把给定的数据转…

C++中的string类

一、构造函数 1.默认构造函数&#xff08;defalut constructor&#xff09;&#xff1a;string() 2.指针拷贝构造函数&#xff08;from c-string&#xff09;&#xff1a;string(const char* s) 3.拷贝构造函数&#xff08;copy constructor&#xff09;&#xff1a;string(…

设计模式之状态模式(一)

设计模式专栏&#xff1a; http://t.csdnimg.cn/4Mt4u 目录 1.概述 2.结构 3.实现 4.总结 1.概述 状态模式( State Pattern)也称为状态机模式( State Machine pattern), 是允许对象在内部状态发生改变时改变它的行为,对象看起来好像修改了它的类, 属于行为型模式。 在状…

多轴机械臂运动控制:4x4坐标变换矩阵该用C语言的二维数组还是一维数组?

做多轴机械臂的运动控制&#xff0c;免不了要对4x4的坐标变换矩阵进行乘法&#xff0c;C语言中可以用二维数组或者一维数组来实现矩阵&#xff0c;下面来比较一下二维数组和一维数组的性能差异。 开发环境&#xff1a;Visual Studio 2022&#xff0c;分别在Debug和Rele…

Linux ~ 查看日志的常用命令总结

1.tail -n <行数>&#xff0c;显示文件的尾部n行内容。 -f 循环读取&#xff0c;常用于查阅正在改变的日志文件。 ① tail -f test.log 实时显示test.log文件里的最尾部的内容&#xff0c;只要test.log更新就可以看到最新的文件内容。 ② tail -100f test.log 实时监控…

IOS面试题编程机制 41-45

41. lldb(gdb)常用的控制台调试命令?1). p 输出基本类型。是打印命令,需要指定类型。是print的简写 p (int)[[[self view] subviews] count] 2). po 打印对象,会调用对象description方法。是print-object的简写 po [self view] 3). expr 可以在调试时动态执行指定表达式,…

Vue3+echarts绘制世界地图

先放效果图 之前所查找的资料都没有讲清楚如何引入地图文件并绘制地图&#xff0c;下面做一个记录。 首先下载对应的地图json文件&#xff0c;这里可以参考我的这篇文章&#xff0c;提供了下载地址&#xff1a;记录echarts各种地图json文件下载地址-CSDN博客 第二步&#xff…

笔记本和台式机主板内部结构分析

笔记本和态势机主板内存接口以及配件安装位置 笔记本主板 1 以thinkpad L-490为例,使用拆机小工具拆机&#xff0c;打开后面板&#xff0c;内部结构示意图如下 台式机主板 以技嘉-B660M-AORUS-PRO-AX型号主板为例 笔记本电脑和台式机电脑的相同之处 CPU&#xff1a;笔记本…

IOS面试题编程机制 36-40

36. 阐述IOS ViewController生命周期?1. initWithCoder:通过nib文件初始化时触发。 2. awakeFromNib:nib文件被加载的时候,会发生一个awakeFromNib的消息到nib文件中的每个对象。 3. loadView:开始加载视图控制器自带的view。 4. viewDidLoad:视图控制器的view被加载完成…

【boost_search搜索引擎】1.获取数据源

boost搜索引擎 1、项目介绍2、获取数据源 1、项目介绍 boost_search项目和百度那种不一样&#xff0c;百度是全站搜索&#xff0c;而boost_search是一个站内搜索。而项目的宏观上实现思路就如同图上的思路。 2、获取数据源 我们要实现一个站内搜索&#xff0c;我们就要有这…

【No.15】蓝桥杯动态规划上|最少硬币问题|0/1背包问题|小明的背包1|空间优化滚动数组(C++)

DP初步&#xff1a;状态转移与递推 最少硬币问题 有多个不同面值的硬币(任意面值)数量不限输入金额S&#xff0c;输出最少硬币组合。 回顾用贪心求解硬币问题 硬币面值1、2、5。支付13元&#xff0c;要求硬币数量最少 贪心: (1)5元硬币&#xff0c;2个 (2)2元硬币&#xff0c…

【微服务】设计弹性微服务架构模式

目录 模式#1 — 超时模式#2 — 重试模式#3— 隔离模式#4— 断路器模式#5 — 冗余推荐超级课程: Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战在微服务架构中,服务通常相互协作以提供业务用例。这些服务可能在可用性、可伸缩性、弹性等方面具有…