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

news2024/9/24 17:09:38

开发工具:微信开发者工具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.coloradmin.cn/o/833473.html

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

相关文章

在Volo.Abp微服务中使用SignalR

假设需要通过SignalR发送消息通知&#xff0c;并在前端接收消息通知的功能 创建SignalR服务 在项目中引用 abp add-package Volo.Abp.AspNetCore.SignalR在Module文件中添加对模块依赖 [DependsOn(...typeof(AbpAspNetCoreSignalRModule))] public class IdentityApplicati…

JavaEE 面试常见问题

一、常见的 ORM 框架有哪些&#xff1f; 1.Mybatis Mybatis 是一种典型的半自动的 ORM 框架&#xff0c;所谓的半自动&#xff0c;是因为还需要手动的写 SQL 语句&#xff0c;再由框架根据 SQL 及 传入数据来组装为要执行的 SQL 。其优点为&#xff1a; 1. 因为由程序员…

便捷省心的手机直播影视工具,畅享轻松电视娱乐时光

便捷省心的手机直播影视工具&#xff0c;畅享轻松电视娱乐时光 在快节奏的现代生活中&#xff0c;我们常常渴望能够以简单、省心的方式消遣自己&#xff0c;享受高品质的电视娱乐。幸运的是&#xff0c;随着技术的进步&#xff0c;便捷省心的手机直播影视工具应运而生。这些工…

原来设计师都在6个网站找素材~

设计师都在用的这些设计素材网站你知道吗&#xff1f;免费、商用真的很香&#xff0c;一定要收藏~ 菜鸟图库 https://www.sucai999.com/?vNTYxMjky 菜鸟图库是一个非常大的素材库&#xff0c;站内包含设计、办公、自媒体、图片、电商等各行业素材。网站主要为新手设计师提供…

网站无法访问的常见原因

有多种问题可能会阻止用户访问您的网站。本文将解决无法访问网站&#xff0c;且没有错误消息指示确切问题的情况&#xff0c;希望对您有所帮助。 无法访问网站的常见原因有&#xff1a; (1)DNS 设置不正确。 (2)域名已过期。 (3)空白或没有索引文件。 (4)网络连接问题。 DNS 设…

bash的特性(二)IO重定向与管道

bash的I/O重定向及管道 一、概述 在shell中&#xff0c;最常使用的fd(file descriptor)有三个&#xff0c;标准输入&#xff0c;标准输出&#xff0c;错误输出。进程用文件描述符来管理打开的文件。 名称 文件描述符 标准输入&#xff08;stdin) 0 键盘&#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…

LangChain+ChatGLM整合LLaMa模型(二)

开源大模型语言LLaMa LLaMa模型GitHub地址添加LLaMa模型配置启用LLaMa模型 LangChainChatGLM大模型应用落地实践&#xff08;一&#xff09; LLaMa模型GitHub地址 git lfs clone https://huggingface.co/huggyllama/llama-7b添加LLaMa模型配置 在Langchain-ChatGLM/configs/m…

第三方软件测评机构如何搭建测试环境?测试报告收费标准

**  在软件产品周期中&#xff0c;软件测试环境是一个非常重要的组成部分它提供了一个模拟真实生产环境的虚拟环境&#xff0c;用于测试和验证软件的功能和性能。一个好的软件测试环境可以帮助开发团队更好地发现和解决问题&#xff0c;提高软件的质量和可靠性。 一、第三方…

EDM邮件打开率标准,如何提高EDM营销打开率?

EDM邮件打开率和转化率平均水平是多少?如何做高转化率的EDM邮件营销? 随着许多企业参与EDM营销&#xff0c;如何提高EDM邮件打开率成为一个关键问题。本文将介绍EDM邮件打开率标准&#xff0c;并提供一些建议&#xff0c;帮助您提升EDM营销打开率&#xff0c;吸引更多潜在客…

便捷就医新选择,深度解析诊所小程序的功能要求

随着移动互联网的快速发展&#xff0c;越来越多的诊所选择开发诊所小程序来提供便捷的医疗服务。诊所小程序是一种基于微信平台的轻量级应用程序&#xff0c;为用户提供在线挂号、诊疗记录查看、医生咨询等功能。本文将介绍诊所小程序的功能要求&#xff0c;以帮助诊所更好地了…

银河麒麟V10 QtCreator安装配置说明(断网离线)

文章目录 1.安装要求:2.安装Qt1.安装要求: 拥有Qt软件安装包qt5.12-arm链接:https://pan.baidu.com/s/1FJerT6SckfjABxAn60rsrA?pwd=mfi6 提取码:mfi6 2.安装Qt 1)拷贝Qt软件包qt5.12-arm至系统/home/kylin/桌面 2)安装Qt软件包 cd /home/kylin/qt5.12-arm/桌面 su…

CLion和VS中avcodec_receive_frame()获取结果不同

1. 介绍 在提取音视频文件中音频的PCM数据时&#xff0c;使用avcodec_receive_frame()函数进行解码时&#xff0c;遇到了一些问题&#xff0c;代码在Visual Studio 2022中运行结果符合预期&#xff0c;但是在CLion中运行时&#xff0c;获取的AVFrame有错误&#xff0c;和VS中获…

HTTP——六、HTTP首部

HTTP首部 一、HTTP报文首部HTTP 请求报文HTTP 响应报文 二、HTTP 首部字段1、HTTP 首部字段传递重要信息2、HTTP 首部字段结构3、4 种 HTTP 首部字段类型4、HTTP/1.1 首部字段一览5、非 HTTP/1.1 首部字段6、End-to-end 首部和 Hop-by-hop 首部 三、HTTP/1.1 通用首部字段1、Ca…

HCIP的mgre小实验

实验要求&#xff1a; 第一步&#xff1a;拓扑的搭建 第二步&#xff1a;路由、IP的配置&#xff1a; r1: <Huawei>sys Enter system view, return user view with CtrlZ. [Huawei]sys r1 [r1]int g 0/0/0 [r1-GigabitEthernet0/0/0]ip add 192.168.1.2 24 [r1-Gigabi…

TCP三次握手,四次挥手理解

1. 三次握手 *三次握手&#xff08;Three-way Handshake&#xff09;*其实就是指建立一个TCP连接时&#xff0c;需要客户端和服务器总共发送3个包。进行三次握手的主要作用就是为了确认双方的接收能力和发送能力是否正常、指定自己的初始化序列号为后面的可靠性传送做准备。实…

【双指针_移动零_C++】

题目解析 移动零 nums [0,1,0,3,12] [1,3,12,0,0]算法原理 数组划分&#xff08;数组分块&#xff09; 双指针算法&#xff08;利用数组下标来充当指针&#xff09;使用两个指针的作用&#xff1a; cur指针&#xff1a;从左往右扫描数组&#xff0c;就是遍历数组。 dest指针…

【ES】笔记-let 声明及其特性

let 声明及其特性 声明变量 变量赋值、也可以批量赋值 let a;let b,c,d;let e100;let f521,giloveyou,h[];变量不能重复声明 let star罗志祥;let star小猪;块级作用域&#xff0c;let声明的变量只在块级作用域内有效 {let girl周杨青;}console.log(girl)注意&#xff1a;在 i…

flutter开发实战-实现css线性渐变转换flutter渐变LinearGradient功能

flutter开发实战-实现css线性渐变转换flutter渐变LinearGradient功能 在之前项目开发中&#xff0c;遇到更换样式&#xff0c;由于从服务器端获取的样式均为css属性值&#xff0c;需要将其转换成flutter类对应的属性值。这里只处理线性渐变linear-gradient 比如渐变 “linear-…

macOS install redis遇到的bug(tar包,homebrew安装,守护进程redis.conf配置)

官网下载tar包再make install 首先是sudo make test的时候一直报 !!! WARNING The following tests failed: *** [err]: trim on SET with big value in tests/unit/type/string.tcl Expected [r memory usage key] < 42000 (context: type source line 478 file /usr/loca…