当前位置: 首页 > 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…...

c++20中的jthread再谈

一、介绍 在前面的C20新功能中&#xff0c;简单的介绍过相关的std::jthread的应用。当时觉得它虽然比std::thread方便一些&#xff0c;但也没有多大的优势。可在后面的不断的学习中&#xff0c;发现std::jthread的使用上确实有优秀之处&#xff0c;相对于传统的线程编程&#…...

Fastgpt 无法启动或启动后无法正常使用的讨论(启动失败、用户未注册等问题这里)

FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&#xff0c;提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排&#xff0c;从而实现复杂的问答场景&#xff01; FastGPT是非常实用并且相当厉害的个人知识库AI项目&#xff0c;项目是非常…...

Rust 实战练习 - 7. FFI, 库, ABI, libc

FFI FFI&#xff08;Foreign Function Interface&#xff09;是这样一种机制&#xff1a;用一种编程语言写的程序能调用另一种编程语言写的函数&#xff08;routines&#xff09;。 调用约定&#xff0c;类型表示和名称修饰这三者的统称&#xff0c;即是众所周知的应用二进制…...

vue实现把Ox格式颜色值转换成rgb渐变颜色值(开箱即用)

图示&#xff1a; 核心代码&#xff1a; //将0x格式的颜色转换为Hex格式&#xff0c;并计算插值返回rgb颜色 Vue.prototype.$convertToHex function (colorCode1, colorCode2, amount) {// 确保输入是字符串&#xff0c;并检查是否以0x开头let newCode1 let newCode2 if (t…...

Unity 窗口化设置

在Unity中要实现窗口化&#xff0c;具体设置如下&#xff1a; 在编辑器中&#xff0c;选择File -> Build Settings。在Player Settings中&#xff0c;找到Resolution and Presentation部分。取消勾选"Fullscreen Mode"&#xff0c;并选择"Windowed"。设…...

Android14之深入理解sp模板类(二百零二)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…...

.NET core 5.0 及以上的Windows Service开发

首先&#xff0c;一定要和.NET Framework区分开&#xff0c; 详细请看微软的2023年的最新官方文档 Create Windows Service using BackgroundService - .NET | Microsoft Learn Create a Windows Service installer - .NET | Microsoft Learn 同样微软的官方微博给出了开发…...

Nginx配置文件解释

Nginx可以作为静态页面的web服务器&#xff0c;同时还支持CGI协议的动态语言&#xff0c;比如perl、php等。但是不支持java。Java程序只能通过与tomcat配合完成。Nginx专为性能优化而开发&#xff0c;性能是其最重要的考量,实现上非常注重效率 &#xff0c;能经受高负载的考验,…...

R语言赋值符号<-、=、->、<<-、->>的使用与区别

R语言的赋值符号有&#xff1c;-、、-&#xff1e;、&#xff1c;&#xff1c;-、-&#xff1e;&#xff1e;六种&#xff0c;它们的使用与区别如下: <-’&#xff1a;最常用的赋值符号。它将右侧表达式的值赋给左侧的变量&#xff0c;像一个向左的箭头。例如&#xff0c;x …...

ffmpeg重点之时间戳,PTS、DTS、time_base

PTS和DTS和时间基time_base 首先我们知道PTS是一帧音频或视频显示的时间&#xff0c;DTS是解码时间戳 既然是时间&#xff0c;PST和DTS的单位是什么呢?秒还是毫秒&#xff0c;抑或是纳秒&#xff1f; 先说结论—都不是 先引入FFmpeg中时间基的概念&#xff0c;也就是time_bas…...

如何做公司的网站建设/全球最牛的搜索引擎

导读你是否想要了解安装包中各个文件在 Linux 系统中安装(位于)的位置&#xff1f;我们将在本文介绍如何列出文件的来源&#xff0c;或存在于某个特定包或者一组软件包中的文件。这篇文章可以帮你轻松地找到重要的软件包文件&#xff0c;如配置文件、帮助文档等。我们来看看找出…...

免费网站建设源码/整站优化工具

5为学校中学生选课管理这个现实问题进行数据库模式设计。根据调查分析&#xff0c;确定它的属性集合为&#xff1a;U{S#,C#,SNAME,CNAME,TEACHER,GRADE,SD}下面给出两种确定的模式设计方案&#xff1a;方案一&#xff1a;只有一个关系模式&#xff1a;R(S#,C#,SNAME,CNAME,TEAC…...

工商网站如何做企业增资/北京网站优化怎么样

一 故障现象&#xff1a;硬盘灯告警二 故障分析&#xff1a;硬盘fault三 处理过程&#xff1a;现场查看发现主机配置两块300GB硬盘&#xff0c;且系统正常运行。判断主机应该做了riad 1&#xff08;fdisk -l命令显示逻辑盘的大小为300GB&#xff09;在线更换硬盘more /var/log/…...

wordpress评论表情插件/网站seo技术能不能赚钱

前言&#xff1a;通过使用视图&#xff08;views&#xff09;可以获得其他实现了Collection接口和Map接口的对象。映射类的keySet方法就是一个示例。keySet方法返回一个实现Set接口的类对象&#xff0c;这个类的方法对原映射进行操作。这种集合称为视图。 1、轻量级集合包装器…...

网站设计深圳哪家强?/alexa排名查询统计

本文纯为大家好好学习Ajax Controltoolkit而写,有不到之处希望大家提出,以免遗祸 众人 标签零 标签一 标签二 标签三 1 11 111 1111 11111 2 22 222 2222 22222 3 33 333 3333 33333 4 44 444 4444 44444 运行结果: 在这显示结果 容器部分属性方法 标签属性方法 ps:如从官方下…...

wordpress audio player/泉州关键词优化软件

redhat上的ftp配置实例环境:redhat9ftp的工作方式分为两种主动(active):当客户端的连接上server的控制端口(21)后,当需要传输数据时,由server主动开启端口(20)连接client被动(passive):控制端口的连接方式与上面一样,只不过当要传数据时,仍是由client发起连接在redhat上采用的软…...