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

开发工具:微信开发者工具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,一经查实,立即删除!

相关文章

基于 kRaft 搭建单机 kafka 测试环境

使用 docker-compose 在单机搭建有三个节点的 kafka 集群。 version: "3"services:kafka1:image: "bitnami/kafka:3.3.1"networks:- kafka-controllercontainer_name: kafka11user: rootports:- 9192:9092environment:### 通用配置# 允许使用kraft&#x…

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;配置元件仅对其所在的测试树分…

1013 Battle Over Cities (PAT甲级)

也可以在每次计算时&#xff0c;直接把visited[lost]标记为true。 #include <cstdio> #include <vector> #include <algorithm> const int maxN 1000;int N, M, K, u, v, lost, cnt; std::vector<int> adj[maxN]; bool visited[maxN];void dfs(int a…

数学知识(一)

一、数论 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;然后在查询时嵌入非结构化查询并检索与嵌入查询“最相似”的嵌入向量。向量存储负责存储嵌入数…

基于MATLAB长时间序列遥感数据植被物候提取与分析

MATLAB MATLAB是美国MathWorks公司出品的商业数学软件&#xff0c;用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人&#xff0c;控制系统等领域。 [1] MATLAB是matrix&laboratory两个词的组合&#xff0c;意为矩阵工厂&a…

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

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

STL容器详解——map容器

一、map容器介绍 作为关联式容器的一种&#xff0c;map 容器存储的都是 pair 对象&#xff0c;也就是用 pair 类模板创建的键值对。其中&#xff0c;各个键值对的键和值可以是任意数据类型&#xff0c;包括 C 基本数据类型&#xff08;int、double 等&#xff09;、使用结构体…

无涯教程-Lua - 垃圾回收

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

Django后端执行成功或失败状态码

后端执行成功或失败以状态码的形式告诉前端&#xff0c;处理成功返回200系列状态码&#xff0c;执行前端then里面的代码&#xff1b;处理失败返回400/500系列状态码&#xff0c;执行catch里面的代码。 200 OK &#xff1a;服务器成功返回用户请求的数据 201 CREATED &#xff…

【SpringBoot】自动配置自动加载controller的原理

SpringBoot自动配置&&自动加载controller的原理.md 好久没有更新自己的博客了,自己最近的正好有点空闲的时间进行,自己在写着写着,突然想起来, 为什么我们点击application就能自动加载Controller呢?(好家伙,我顿时鱼鳃,哈哈) 1.首先我们来到启动现场>启动类 Sprin…

优质文章集合

开发人员如何停止学习&#xff1a;专家初学者的崛起 How Developers Stop Learning: Rise of the Expert Beginner - DaedTech

使用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;掌握基本编程…