当前位置: 首页 > news >正文

微信小程序全局数据共享

文章目录

  • 安装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"}},
})

相关文章:

微信小程序全局数据共享

文章目录 安装MobX相关的包根目录创建store文件夹,添加store.js文件绑定到页面中绑定到组件 mobx-miniprogram和mobx-miniprogram-bindings实现全局数据共享 mobx-miniprogram用来创建Store实例对象 mobx-miniprogram-bindings用来把Store中的共享数据或方法&…...

算法训练营第24天|回溯算法理论基础 LeetCode 77.组合

终于把二叉树做完了!开始新的篇章,回溯! 回溯算法理论基础 回溯算法题目分类: 1.组合 2.分割 3.子集 4.排列 5.棋盘问题 什么是回溯? 回溯叫做回溯搜索法,是一种搜索方式。回溯是递归的副产品&…...

pip永久修改镜像地址

修改命令: pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple/ 效果: 会在C:\Users\PC(用户名)\AppData\Roaming\pip目录下新增或修改文件pip.ini 文件内容: [global] index-url https://pypi.tuna.tsinghua.e…...

RK3588平台开发系列讲解(硬件篇-功能外设2)

USB2.0/USB3.0 电路 RK3588 芯片内置两个USB3.0 OTG控制器(内嵌2个USB2.0 OTG,下图绿色处),1个USB3.0 HOST 控制器,2个USB2.0 HOST控制器。 这些控制器与PHY的内部复用图如下: USB3.0 OTG0 控制器支持SS/H…...

SpringBoot学习记录

SpringBoot是用于加速Spring开发的。 我们先来看看如何使用SpringBoot来创建一个基于Web的程序,可以发现相较于SpringMVC其有巨大改变。 3.开发控制器类 GetMapping("/{id}")public String getById(PathVariable Integer id){System.out.println("…...

财富池指标--通达信顾比均线实战指标免费源码

顾比均线是由两组均线构成,短期组为3、5、8、10、12、15。长期组为:30、35、40、45、50、60。顾比均线由澳大利亚的投资家戴若-顾比先生发明,因此叫顾比线。 顾比均线可以广泛运用于股票、期货和外汇交易中,只要是能运用K线图的投…...

AJAX(一):初识AJAX、http协议、配置环境、发送AJAX请求、请求时的问题

一、什么是AJAX 1.AJAX 就是异步的JS和XML。通过AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。 2.XML 可扩展标记语言。XML被设计用来传输和…...

idea常用的快捷键总结:

idea常用的快捷键总结: Ctrl相关的: Ctrl F 在当前文件进行文本查找 (必备) Ctrl R 在当前文件进行文本替换 (必备) Ctrl Z 撤销 (必备) Ctrl Y 删除光标所在行 或 删除选中的…...

LeetCode 热题 100 题解(一):哈希部分

《LeetCode热题 100》 经过了两个多月,终于刷完了代码随想录的题目,现在准备开始挑战热题一百了,接下来我会将自己的题解以博客的形式同步发到力扣和 c 站,希望在接下来的征程中与大家共勉! 题组一:哈希 题…...

C语言 | qsort()函数使用

目录: 1.qsort介绍 2.使⽤qsort函数 排序 整型数据 3.使⽤qsort函数 排序 结构体数据 4. qsort函数的模拟实现冒泡排序 qsort()函数 是一个 C语言编译器函数库自带的排序函数, 它可以对指定数组(包括字符串,二维数组&#x…...

继承的特点 | java

/*Java中继承的特点:A:Java只支持单继承,不支持多继承。 B:Java支持多层继承(继承体系),间接继承 */class Father(){} class Mother(){}class son extends Father(){} // 正确 class son2 extends Father , Mother {} // 不正确 1. Java只支持单继承…...

6、jenkins项目构建类型-项目类型介绍

文章目录 一、自由风格项目1、拉取代码2、演示改动代码后的持续集成二、Maven项目构建三、Pipeline流水线项目构建(☆☆☆)1、Pipeline简介(1)概念(2)使用Pipeline有以下好处(3)如何创建Jenkins Pipeline呢?2、安装Pipeline插件3、Pipeline语法快速入门(1)Declarati…...

指针函数的应用——找出哪些学生有不及格的科目

下面的代码实现了以下功能: 定义了一个函数 getFailStudent,它接收一个指向整数数组的指针,并遍历该数组,查找是否存在不及格的成绩。如果找到了不及格的成绩,就返回指向不及格学生所在行的指针;否则返回 N…...

【微服务】Gateway

文章目录 1.基本介绍官方文档:https://springdoc.cn/spring-cloud-gateway/#gateway-starter1.引出网关2.使用网关服务架构图3.Gateway网络拓扑图(背下来)4.Gateway特性5.Gateway核心组件1.基本介绍2.断言3.过滤 6.Gateway工作机制 2.搭建Gat…...

王道C语言督学营OJ课后习题(课时14)

#include <stdio.h> #include <stdlib.h>typedef char BiElemType; typedef struct BiTNode{BiElemType c;//c 就是书籍上的 datastruct BiTNode *lchild;struct BiTNode *rchild; }BiTNode,*BiTree;//tag 结构体是辅助队列使用的 typedef struct tag{BiTree p;//树…...

Filter、Listener、AJAX

Filter 概念&#xff1a;Filter 表示过滤器&#xff0c;是JavaWeb三大组件(Servlet、Filter、 Listener)之一。 过滤器可以把对资源的请求拦截下来&#xff0c;从而实现一些特殊的功能。 过滤器一般完成一些通用的操作&#xff0c;比如&#xff1a;权限控制、统一编码处理、敏感…...

FastAPI+React全栈开发04 FastAPI概述

Chapter01 Web Development and the FARM Stack 04 Introducing FastAPI FastAPIReact全栈开发04 FastAPI概述 Now we will look at a brief introducion to the Python REST-API framework of choice - FastAPI. Additionally, we will go over a high-level overview of t…...

基于单片机的二维码LCD显示控制设计

**单片机设计介绍&#xff0c;基于单片机的二维码LCD显示控制设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机的二维码LCD显示控制设计是一个集硬件、软件与通信于一体的综合性项目。此设计的主要目标是实现单片机…...

Ubuntu20.04下PCL安装,查看,卸载等操作

Ubuntu20.04下PCL安装&#xff0c;查看&#xff0c;卸载等操作 项目来源 https://github.com/PointCloudLibrary/pclhttps://pointclouds.org/documentation/modules.htmlhttps://pcl.readthedocs.io/projects/tutorials/en/master/ 点云学习&#xff1a; https://github.c…...

Android TargetSdkVersion 30 安装失败 resources.arsc 需要对齐且不压缩。

公司项目&#xff0c;之前targetSDKVersion一直是29&#xff0c;近期小米平台上架强制要求升到30&#xff0c;但是这个版本在android12上安装失败&#xff0c;我用adb命令安装&#xff0c;报错如下图 adb: failed to install c: Program Files (x86)(0A_knight\MorkSpace \Home…...

基于WebSocket与Protobuf协议的抖音直播间实时数据采集方案

基于WebSocket与Protobuf协议的抖音直播间实时数据采集方案 【免费下载链接】DouyinLiveWebFetcher 抖音直播间网页版的弹幕数据抓取&#xff08;2024最新版本&#xff09; 项目地址: https://gitcode.com/gh_mirrors/do/DouyinLiveWebFetcher 技术背景与挑战 在当今直…...

十大经典排序算法解析与实现

## 1. 十大经典排序算法技术解析### 1.1 算法分类体系 排序算法可分为两大技术类别&#xff1a;**比较类排序**&#xff1a; - 通过元素间比较确定相对次序 - 时间复杂度下限为O(nlogn) - 典型代表&#xff1a;快速排序、堆排序、归并排序**非比较类排序**&#xff1a; - 不依赖…...

cutlass代码架构分析

CUTLASS 代码架构分析 本文档基于 cutlass代码进行梳理,快速理解 CUTLASS 4.x 的模块边界与调用链路。 1. 总体架构 CUTLASS 本质上是一个 header-only 的 CUDA C++ 模板库,外围配套了可选构建目标: include/:核心库(cutlass + cute) tools/:库实例化、性能测试与通用…...

UE5 Widget Blueprint实战:5分钟搞定动态血量条与得分系统(附完整蓝图代码)

UE5 Widget Blueprint实战&#xff1a;5分钟搞定动态血量条与得分系统&#xff08;附完整蓝图代码&#xff09; 在独立游戏开发中&#xff0c;UI系统往往是决定玩家体验的关键因素之一。想象一下&#xff1a;当玩家在激烈的战斗中无法快速获取角色状态&#xff0c;或是完成成就…...

PyTorch 2.8镜像部署教程:适配550.90.07驱动的GPU监控与显存优化技巧

PyTorch 2.8镜像部署教程&#xff1a;适配550.90.07驱动的GPU监控与显存优化技巧 1. 镜像概述与环境准备 PyTorch 2.8深度学习镜像专为RTX 4090D 24GB显卡和CUDA 12.4环境深度优化&#xff0c;预装了完整的深度学习工具链。这个镜像已经过严格测试&#xff0c;确保在550.90.0…...

基于springboot运动服装销售系统设计与开发(源码+精品论文+答辩PPT等资料)

博主介绍&#xff1a;CSDN毕设辅导第一人、靠谱第一人、全网粉丝50W,csdn特邀作者、博客专家、腾讯云社区合作讲师、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交…...

SVG-Edit:开源矢量编辑在浏览器工具中的创新实践

SVG-Edit&#xff1a;开源矢量编辑在浏览器工具中的创新实践 【免费下载链接】svgedit Powerful SVG-Editor for your browser 项目地址: https://gitcode.com/gh_mirrors/sv/svgedit SVG-Edit是一款基于浏览器环境的开源矢量图形编辑工具&#xff0c;提供在线SVG编辑能…...

JDK17下Lombok报错?手把手教你解决IllegalAccessError问题(附最新版本配置)

JDK17与Lombok兼容性实战&#xff1a;彻底解决IllegalAccessError的终极指南 最近在将项目迁移到JDK17时&#xff0c;不少开发者反馈遇到了一个棘手的错误&#xff1a;java.lang.IllegalAccessError&#xff0c;特别是与Lombok相关的模块访问问题。这个错误看似简单&#xff0c…...

老王-你驾驭不住的东西才会显相

你驾驭不住的东西&#xff0c;才会显相 ——展现即风险&#xff0c;驾驭方为道“大象无形。” 真正强大的人&#xff0c;从不轻易显相—— 因为显&#xff0c;即招&#xff1b;露&#xff0c;即险。⚠️ 你想展现什么&#xff0c;就必须能驾驭什么。&#x1f525; 六大展现&…...

【实战篇】OneWire时序精解:从复位脉冲到DS18B20温度读取

1. OneWire协议基础&#xff1a;单线通信的魔法 第一次接触OneWire&#xff08;单总线&#xff09;协议时&#xff0c;我盯着那根孤零零的信号线愣了半天——这根线既要供电又要传数据&#xff0c;还要协调多个设备&#xff0c;简直像用一根吸管同时喝奶茶、吃珍珠和传情书。但…...