【微信小程序】全局数据共享 - MobX

1. 什么是全局数据共享

在这里插入图片描述

在这里插入图片描述

2. 小程序中的全局数据共享方案

在这里插入图片描述

3.Mobx的使用

1.npm init -y(根据实际情况选择)

在小程序项目中,可以通过 npm 的方式引入 MobX 。
如果你还没有在小程序中使用过 npm ,那先在小程序目录中执行命令:

npm init -y

2. 安装 MobX 相关的包

在项目中运行如下的命令,安装 MobX 相关的包:

npm install --save mobx-miniprogram mobx-miniprogram-bindings

安装指定版本:
在这里插入图片描述

3.构建npm(一定要记得)

MobX 相关的包安装完毕之后,记得删除 miniprogram_npm 目录后重新构建 npm

4.创建 MobX 的 Store 实例

  1. 根目录下创建 Store/store.js 文件。
  2. mobx-miniprogram 包中导入 observableaction两个方法。
  • observable: 用于创建 store 的实例对象
  • action: 用于包裹修改 store 数据的函数

在这里插入图片描述

import { observable,action} from 'mobx-miniprogram'
// observable 的返回值就是 store 对象
export const store = observable({// 数据字段numA: 1,numB: 2,// 计算属性 get为修饰符get sum(){return this.numA + this.numB},//action方法,用来修改 store 中的数据updateNumA: action(function (step){this.numA += step}),updateNumB: action(function (step){this.numB += step})
})

5.将 Store 中的成员绑定到页面

在小程序中,将 store 成员绑定到页面中使用,可分三个步骤:

    1. 在页面 js 文件导入需要的成员。–createStoreBindings
    1. 在 onLoad 开始生命周期进行绑定。
    1. 在 onUnload 生命周期取消监听。

在这里插入图片描述

// pages/message/message.js
import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Page({addSumA(e){this.updateNumA(e.target.dataset.step)},/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.storeBindings = createStoreBindings(this,{store,fields: ['numA','numB','sum'],actions: ['updateNumA']  // 注意是actions  不是action})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {this.storeBindings.destroyStoreBindings()},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

其中 createStoreBindings 中的this指向当前调用该函数的实例,也就是 message 页面实例
第二个参数是一个对象,
store 代表着数据源,将 store 的属性或者方法绑定到页面实例中。
fields 是绑定到页面实例中的数据字段。
actions 是绑定到页面实例中的方法。
this.storeBindings 是接收 createStoreBindings 的返回值,并挂载在页面上,当页面卸载时需要进行清空操作。

6.在页面上使用 Store 中的成员

在这里插入图片描述

<!--pages/message/message.wxml-->
<text>pages/message/message.wxml</text>
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button bindtap="addSumA" data-step="{{1}}" type="primary">numA + 1</van-button>

7.将 Store 中的成员绑定到组件

Store 中的属性方法绑定到组件中,实现步骤可分为三个步骤:

  • 在组件 js 文件导入需要的成员。–storeBindingsBehavior
  • 在 Component 提供behaviors节点来存储前面导入的 Behaviors 数组。
  • 在 behaviors 节点平级的位置声明 storeBindings 对象接收 store、fields 和 actions 这三个属性。
  • 在这里插入图片描述
// components/my-number/my-number.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'
Component({behaviors:[storeBindingsBehavior],storeBindings:{store,fields:{numA: ()=> store.numA,numB: (store) => store.numB,sum:'sum'},actions:{updateNumB:'updateNumB'}},/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {addNumB(e){this.updateNumB(e.target.dataset.step)}}
})

8.在组件上使用 Store 中的成员

在这里插入图片描述

<!--components/my-number/my-number.wxml-->
<text>components/my-number/my-number.wxml</text>
<view>-----------------组件---------------</view>
<van-button type="primary" bindtap="addNumB" data-step="{{1}}">numB + 1</van-button>

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

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

相关文章

国内哪个期货程序化交易软件比较靠谱

炒股自动化&#xff1a;申请官方API接口&#xff0c;散户也可以 python炒股自动化&#xff08;0&#xff09;&#xff0c;申请券商API接口 python炒股自动化&#xff08;1&#xff09;&#xff0c;量化交易接口区别 Python炒股自动化&#xff08;2&#xff09;&#xff1a;获取…

19.神经网络 - 线性层及其他层介绍

神经网络 - 线性层及其他层介绍 1.批标准化层–归一化层&#xff08;不难&#xff0c;自学看官方文档&#xff09; Normalization Layers torch.nn — PyTorch 1.10 documentation BatchNorm2d — PyTorch 1.10 documentation 对输入采用Batch Normalization&#xff0c;可…

[数据集][目标检测]光伏发电板红外图像鸟粪检测数据集VOC+YOLO格式173张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;173 标注数量(xml文件个数)&#xff1a;173 标注数量(txt文件个数)&#xff1a;173 标注类别…

sentinel安装

Releases alibaba/Sentinel GitHub java -jar sentinel-dashboard-1.8.8.jar 默认启动端口是8080 修改端口启动 java -jar sentinel-dashboard-1.8.8.jar --server.port8888 localhost:配置的端口 账密都是sentinel

本地部署Xinference实现智能体推理工作流(一)

提示&#xff1a;没有安装Docker的需要先提前安装好Docker 第一篇章 使用AutoDL平台快速部署xinference 备注&#xff1a;若使用AutoDL平台&#xff0c;以下过程使用无卡模型开机即可(省钱) 1. 下载Dify源码 Github下载Dify:https://github.com/langgenius/dify 2. 快速启动…

通过观测云 eBPF Tracing 实现无埋点的全链路追踪

前言 随着微服务架构的普及和系统复杂度的增加&#xff0c;对应用程序的可观测性要求也越来越高。传统的监控方法通常需要在应用程序中添加代码来记录和追踪重要信息&#xff0c;这种方法可能会增加系统的负担&#xff0c;并且在复杂系统中维护难度较大。 eBPF&#xff08;Ex…

Linux 系统调优 2

### 4. **网络调优** - **TCP/IP 参数调优**: 调整 /etc/sysctl.conf 中的网络相关参数&#xff0c;如 net.core.somaxconn、net.ipv4.tcp_tw_reuse、net.ipv4.tcp_rmem 等&#xff0c;提高网络堆栈的效率。 - **网络队列管理**: 使用 tc&#xff08;Traffic Control&…

【Yarn】Yarn的基本执行流程(二)AM Container的启动

Yarn的基本执行流程之AM Container的启动 文章目录 Yarn的基本执行流程之AM Container的启动AM Container&#xff08;第一个Container&#xff09;的启动NM RM心跳交互触发调度Container的启动流程RM中调度启动AM流程AMLauncher启动流程NM上容器的启动流程下载资源AM Containe…

告别PDF格式困扰,2024年PDF转换器推荐

PDF现在已经逐渐成为了文件传输的主流格式了&#xff0c;它有保存文件页面版式的优点&#xff0c;但是这个格式编辑对大部分人来说还是不那么方便&#xff0c;日常我们还是习惯将它们转换成我们常见的 文本格式来操作。今天我分享一下可以实现PDF格式转换的pdf转换器有哪些吧。…

SX_c语言字符串赋值 “multiple definition of .. first defined here”问题_21

字符串赋值问题&#xff1a; #include <stdio.h> #include <string.h>char* my_string_cat(int position, int slot, char* content){char* gnsst NULL;static char retvalue[50];memset(retvalue, \0, sizeof(retvalue));if(position 0){//头部if(slot 0){//卡…

探索微服务架构中的动态服务发现与调用:使用 Nacos 与 Spring Cloud OpenFeign 打造高效订单管理系统

1. 背景 在现代微服务架构中&#xff0c;服务之间的通信与协作是非常重要的。Spring Cloud Alibaba 提供了一套完整的微服务解决方案&#xff0c;其中包括 Nacos 用于服务注册与发现&#xff0c;OpenFeign 用于声明式服务调用&#xff0c;Spring Cloud LoadBalancer 用于负载均…

FAISS 索引

FAISS&#xff08;Facebook AI Similarity Search&#xff09;是一个由 Facebook 开发的开源库&#xff0c;用于高效的相似性搜索和密集向量的聚类。它非常适合处理大规模的向量搜索任务&#xff0c;例如推荐系统、图像搜索、自然语言处理中的嵌入搜索等。 FAISS 文件概述 FAI…

vite 实现包的拆分

Vite 和 Rollup 是现代前端开发中两个非常流行的工具&#xff0c;它们各自有独特的用途和特点&#xff0c;但它们之间也存在一定的联系。 Vite Vite 是一个由 Vue 团队成员开发的前端构建工具&#xff0c;它的核心特点是在开发环境下提供极快的服务器启动和热模块替换&#x…

【视频讲解】SMOTEBoost、RBBoost和RUSBoost不平衡数据集的集成分类酵母数据集、治癌候选药物|数据分享...

全文链接&#xff1a;https://tecdat.cn/?p37502 分析师&#xff1a;Zilin Wu 在当今的大数据时代&#xff0c;科研和实际应用中常常面临着海量数据的处理挑战。在本项目中&#xff0c;我们拥有上万条数据&#xff0c;这既是宝贵的资源&#xff0c;也带来了诸多难题。一方面&a…

【递归回溯之floodfill算法专题练习】

1. 图像渲染 class Solution {int dx[4] {0, 0, -1, 1};int dy[4] {1, -1, 0, 0};int m, n;int oldcolor; public:vector<vector<int>> floodFill(vector<vector<int>>& image, int sr, int sc, int color) {oldcolor image[sr][sc]; // 保存原…

MySQL数据库MVCC机制底层原理详解

mvcc机制即多版本并发控制 当在事务中使用了写操作&#xff08;增删改&#xff09;语句时会给当前事务生成一个事务id&#xff0c;事务id是递增的 同时&#xff0c;对于被修改的行的数据会创建一个数据版本 &#xff0c;这个数据版本除了包含原有的字段还会包含一个事务id和一…

Linux驱动开发—创建总线,创建属性文件

文章目录 1.什么是BUS&#xff1f;1.1总线的主要概念1.2总线的操作1.3总线的实现 2.创建总线关键结构体解析2.1注册总线到系统2.2 struct bus_type *bus 解析 3.实验结果分析1. devices 目录2. drivers 目录3. drivers_autoprobe 文件4. drivers_probe 文件5. uevent 文件 4.在…

【Rust光年纪】深度解读:Rust语言中各类消息队列客户端库详细对比

选择最佳 Rust 消息队列客户端库&#xff1a;全面对比与分析 前言 随着现代应用程序的复杂性不断增加&#xff0c;消息队列成为构建可靠、高性能系统的重要组件。本文将介绍一些用于Rust语言的消息队列客户端库&#xff0c;包括AMQP、Apache Kafka、NSQ、Apache Pulsar和Rock…

开发新系统时,数据库字符集怎么选择对中文的支持最好?

在新开发的系统时,如果你希望确保中文按拼音顺序正确排序,同时支持更多的特殊字符与符号,下面是对 utf8mb4_zh_cn_ci、utf8mb4_unicode_ci 和 utf8mb4_unicode_520_ci 这几种字符集和校对规则的分析以及推荐方案: 校对规则分析 utf8mb4_zh_cn_ci: 特点:这是专为简体中文…

goalng http client的MaxIdleConnsPerHost,MaxIdleConns,MaxConnsPerHost参数设置总结

MaxIdleConnsPerHost&#xff1a;优先设置这个&#xff0c;决定了对于单个Host需要维持的连接池大小。该值的合理确定&#xff0c;应该根据性能测试的结果调整。MaxIdleConns&#xff1a;客户端连接单个Host&#xff0c;不少于MaxIdleConnsPerHost大小&#xff0c;不然影响MaxI…