微信小程序中的全局数据共享(状态管理)使用介绍

开发工具:微信开发者工具Stable 1.06 

一、状态管理简介

微信小程序全局状态是指可以在不同页面之间共享的数据或状态。

它可以存储用户的登录状态、个人信息、全局配置信息等。

二、安装MobX

1、安装NPM 

在资源管理器的空白地方点右键,选择“在外部终端窗口中打开”,注意要用管理员权限打开

输入 npm init -y

 在“工具”一栏中选择“构建NPM”

 

2、安装MobX

步骤和上面一样,输入的代码改成下面这行:

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

 

三、MobX简介

小程序中使用 mobx-miniprogram 和 mobx-miniprogram-bindings 实现全局数据共享

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

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

四、MobX的使用

1、创建全局数据store

在根目录下创建store文件夹,在store文件夹里面创建store.js文件

// 在这个 JS 文件中,专门来创建 Store 的实例对象// 引入observable(存放数据), action(修改数据)
import { observable, action } from 'mobx-miniprogram'// 创建store对象
export const store = observable({// 1 数据字段numA: 1,numB:2 ,// 2 计算属性get sum(){return this.numA + this.numB},// 3 action 方法,用来修改store中的数据// 普通页面中的方法不能修改这里的数据,方法要用 action() 包裹updateNum1:action(function(step){this.numA += step}),updateNum2:action(function(step){this.numB += step})
})

 2、使用全局数据store

先在js页面中挂载store 交给this

// 引入 操作全局数据的方法 createStoreBindings
// 引入 全局数据 store
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'// 在onLoad 中加载全局数据,可以按需加载onLoad: function (options) {this.storeBindings = createStoreBindings(this,{store,fields:['numA','numB','sum'],action: ['updateNum1']})},// 在onUnload中做下销毁onUnload: function () {this.storeBindings.destroyStoreBindings()},

再在WXML页面中使用

数据的使用

数据直接就可以使用,同时找两个页面写上展示数据

<view> {{numA}} + {{numB}} = {{sum}} </view>

方法的使用

传参: data-step="{{1}}"  调用: e.target.dataset.step

方法也可以直接使用

<button bindtap="btnHandler1" data-step="{{1}}">numA + 1</button>
<button bindtap="btnHandler1" data-step="{{-1}}">numA - 1</button>
 btnHandler1(e) {this.updateNum1(e.target.dataset.step)},

五、使用效果

在一个页面中修改全局数据,另一个页面的数据也会被修改

 

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

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

相关文章

css在线代码生成器

这里收集了许多有意思的css效果在线代码生成器适合每一位前端开发者 布局&#xff0c;效果类&#xff1a; 网格生成器https://cssgrid-generator.netlify.app/ CSS Grid Generator可帮助开发人员使用CSS Grid创建复杂的网格布局。网格布局是创建Web页面的灵活和响应式设计的强…

解密HTTP代理爬虫中的IP代理选择与管理策略

在当今数据驱动的世界中&#xff0c;HTTP代理爬虫作为一项重要的数据采集工具&#xff0c;其成功与否往往取决于IP代理的选择与管理策略。作为一家专业的HTTP代理产品供应商&#xff0c;我们深知IP代理在数据采集中的重要性。在本文中&#xff0c;我们将分享一些关于HTTP代理爬…

如何使用 ChatGPT 为 Midjourney 或 DALL-E 等 AI 图片生成提示词

人工智能为创意产业开辟了一个充满可能性的全新世界。人工智能最令人兴奋的应用之一是生成独特且原创的艺术品。Midjourney 和 DALL-E 是人工智能生成艺术的两个突出例子&#xff0c;吸引了艺术家和艺术爱好者的注意。在本文中&#xff0c;我们将探索如何使用 ChatGPT 生成 AI …

某科技公司提前批测试岗

文章目录 题目 今天给大家带来一家提前批测试岗的真题&#xff0c;目前已经发offer 题目 1.自我介绍 2.登录页面测试用例设计 3.如何模拟多用户登录 可以使用Jmeter,loadRunner性能测试工具来模拟大量用户登录操作去观察一些参数变化 4.有使用过Jmeter,loadRunner做过性能压…

Jmeter组件作用域及执行顺序

目录 一、Jmeter八大可执行元件 二、组件执行顺序 三、组件作用域 四、特殊说明 一、Jmeter八大可执行元件 配置元件---Config Element 用于初始化默认值和变量&#xff0c;以便后续采样器使用。配置元件大其作用域的初始阶段处理&#xff0c;配置元件仅对其所在的测试树分…

数学知识(一)

一、数论 1.1质数 定义:在所有大于1的自然数&#xff0c;如果只包含1和本身这两个约数&#xff0c;就被称为质数(素数). 质数的判断:试除法 bool is_prime(int n) {if(n < 2) return false;for(int i 2;i < n / i;i ){if(n % i 0)return false;}return true; } 分…

【LangChain】向量存储(Vector stores)

LangChain学习文档 【LangChain】向量存储(Vector stores)【LangChain】向量存储之FAISS 概要 存储和搜索非结构化数据的最常见方法之一是嵌入它并存储生成的嵌入向量&#xff0c;然后在查询时嵌入非结构化查询并检索与嵌入查询“最相似”的嵌入向量。向量存储负责存储嵌入数…

数据泄露的平均成本创历史新高

IBM Security 发布了年度数据泄露成本报告&#xff0c;显示数据泄露的全球平均成本在 2023 年达到 445 万美元&#xff0c;创下该报告的历史新高&#xff0c;并且比过去 3 年增加了 15%。 检测和升级成本在同一时间段内跃升了 42%&#xff0c;占违规成本的最高部分&#xff0c…

无涯教程-Lua - 垃圾回收

Lua使用自动内存管理&#xff0c;该管理使用基于Lua内置的某些算法的垃圾回收。 垃圾收集器暂停 垃圾收集器暂停用于控制垃圾收集器之前需要等待多长时间&#xff1b; Lua的自动内存管理再次调用它。值小于100意味着Lua将不等待下一个周期。同样&#xff0c;此值的较高值将导…

使用socket实现UDP版的回显服务器

文章目录 1. Socket简介2. DatagramSocket3. DatagramPacket4. InetSocketAddress5. 实现UDP版的回显服务器 1. Socket简介 Socket&#xff08;Java套接字&#xff09;是Java编程语言提供的一组类和接口&#xff0c;用于实现网络通信。它基于Socket编程接口&#xff0c;提供了…

opencv36-形态学操作-膨胀 cv2.dilate()

膨胀操作是形态学中另外一种基本的操作。膨胀操作和腐蚀操作的作用是相反的&#xff0c;膨胀操作能对图像的边界进行扩张。膨胀操作将与当前对象&#xff08;前景&#xff09;接触到的背景点合并到当前对象内&#xff0c;从而实现将图像的边界点向外扩张。如果图像内两个对象的…

分布式应用:ELFK集群部署

目录 一、理论 1.ELFK集群 2.filebeat 3.部署ELK集群 二、实验 1. ELFK集群部署 三、总结 一、理论 1.ELFK集群 &#xff08;1&#xff09;概念 ELFK集群部署&#xff08;FilebeatELK&#xff09;&#xff0c;ELFK ES logstashfilebeatkibana 。 数据流 架构 2.fi…

零基础C#编写上位机如何入门?

想要学习C#编写上位机&#xff0c;需要具备以下基础知识&#xff1a; C#编程语言基础.NET框架的使用WinForm窗体应用程序开发技术基本的数据结构和算法知识 为了方便理解&#xff0c;我将为您列出一些入门步骤&#xff1a; 学习C#基础语法和.NET框架&#xff0c;掌握基本编程…

【Ajax】笔记-JQuery发送jsonp请求

前端 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>jQuery-jsonp</title><style>#re…

python+opencv实现显示摄像头,截取相关图片,录取相关视频

实时显示摄像头图像 按下空格键&#xff0c;截取图片 按下tab键&#xff0c;开始录制摄像内容&#xff0c;再次按下&#xff0c;结束录制 按下Esc键&#xff0c;关闭窗口 import cv2 import numpy#第几章图片 img_count0InitVideoFalse #第几个视频 video_count0 video_flagFa…

【Linux 网络】 传输层协议之TCP协议 TCP的三次握手和四次挥手

TCP协议 TCP协议段格式谈谈什么是 “可靠” 和 “不可靠”TCP协议段——序号与确认序号TCP协议段——窗口大小TCP协议段 —— 六个标志位确认应答机制&#xff08;ACK&#xff09;超时重传机制连接管理机制TCP 的三次握手四次挥手TCP三次握手四次挥手总结图 滑动窗口流量控制拥…

将Visio和Excel导出成没有白边的PDF文件

1、VISIO如何无白边导出pdf格式 在使用Latex时&#xff0c;要导入矢量图eps格式。但是VISIO无法输出eps格式&#xff0c;这就需要将其导出为pdf。但是导出pdf时&#xff0c;往往会有大量的白边。VISIO无白边导出pdf格式的方法如下&#xff1a; 1.文件——开发工具——显示sha…

OpenLayers入门,OpenLayers解析通过fetch请求的GeoJson格式数据,并叠加要素文字标注,以行政区划边界为例

专栏目录: OpenLayers入门教程汇总目录 前言 本章讲解如何使用OpenLayers通过fetch请求geojson数据,然后通过OpenLayers解析为Feature要素叠加到图层上,并且通过动态设置标注方式显示要素属性为文字标注。 本章还是以行政区划边界为例,这个示例在开发中比较常用,建议收藏…

利用OpenCV实现图像拼接

一、介绍 图像拼接. 二、分步实现 要实现图像拼接&#xff0c;简单来说有以下几步&#xff1a; 对每幅图进行特征点提取对对特征点进行匹配进行图像配准把图像拷贝到另一幅图像的特定位置对重叠边界进行特殊处理 PS&#xff1a;需要使用低版本的opencv&#xff0c;否则无法使…

【C语言学习】C语言的基础数据类型

一、数据类型 1.整型 short(短整型) int&#xff08;整型 long&#xff08;长整型&#xff09; long long&#xff08;长整型&#xff09;没有特殊需要&#xff0c;就用int 2.浮点型 float&#xff08;单精度型&#xff09; double&#xff08;双精度型&#xff…