微信小程序 全局共享数据 mobx

前言

        全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有:Vuex、Redux、MobX 等。

一. 安装

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

安装完之后要重新构建  工具---->构建npm

二. 创建store文件夹以及store.js

import { observable, action } from 'mobx-miniprogram';// observable 的返回值就是 store 对象
export const store = observable({// 需要挂载的数据 -- 数据字段numA: 1,// 计算属性 -- get为修饰符// get sum() {//     return this.numA + this.numB;// },// actions 函数,专门来修改 store 中数据的值updateNum1: action(function (step) {this.numA += step;}),
})

三. 在page页面中使用 stroe

其中在页面上 我就直接拿this.data.numA以及方法this.updateNum1(); 使用就行

import {createStoreBindings} from 'mobx-miniprogram-bindings';
import {store} from '../../store/store';Page({/*** 生命周期函数--监听页面加载*/onLoad(options) {this.storeBindings = createStoreBindings(this, {store,fields: ['numA'],actions: ['updateNum1']})},/*** 生命周期函数--监听页面卸载*/onUnload() {this.storeBindings.destroyStoreBindings();},
})

四. 在成员组件中使用store

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'Component({// 通过 storeBindingsBehavior 来实现自动绑定behaviors:[storeBindingsBehavior],storeBindings:{store,fields:{// 绑定字段的三种方式numA: () => store.numA,numB: (store) => store.numB,sum: 'sum'},actions:{updateNum2: 'updateNum1'}},})

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

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

相关文章

STM32在CTF中的应用和快速解题

题目给的是bin文件,基本上就是需要我们手动修复的固件逆向。 如果给的是hex文件,我们可能需要使用MKD进行动态调试 主要还是以做题为目的 详细的可以去看文档:https://pdf1.alldatasheet.com/datasheet-pdf/view/201596/STMICROELECTRONIC…

【超图】SuperMap iClient3D for WebGL/WebGPU —— 单体gltf模型与Blender中的方向对应关系

作者:taco 在很多包含动画的场景中,像模拟小人的行走、模拟火车的轨迹运行,又或者是模拟风力发电等等等。我们通常会加一些动画模型到里面。而有的时候可能会出现,这火车怎么倒着走啊!这人怎么头朝下啊。这种方向的问题…

50种css常用的代码(实用)

目录 1、文字超出部分显示省略号 2、中英文自动换行 3、文字阴影 4、设置placeholder的字体样式 5、不固定高宽 div 垂直居中的方法 6、设置滚动条样式 7、实现隐藏滚动条同时又可以滚动 8、创建渐变背景 9、悬停效果(Hover) 10、改变链接的样…

SOLIDWORKS PDM—邮件信息系统

SOLIDWORKS产品数据管理 (PDM) 解决方案可帮助您控制设计数据,并且从本质上改进您的团队就产品开发进行管理和协作的方式。使用 SOLIDWORKS PDM Professional,您的团队能够:1. 安全地存储和索引设计数据以实现快速检索;2. 打消关于…

分布式解决方案与实战

分布式多线程性能调优 使用多线程优化接口 //下单业务public Object order( long userId){long start System.currentTimeMillis();//方法的开始时间戳&#xff08;ms&#xff09;JSONObject orderInfo remoteService.createOrder(userId);Callable<JSONObject> calla…

Tomcat的结构和部署

目录 什么是tomcat&#xff1f; Tomcat 核心的组件三个 什么是 servlet&#xff1f; 什么是 JSP? Tomcat 功能组件结构&#xff1a; Container 结构分析&#xff1a; Tomcat 请求过程&#xff1a; 具体部署Tomcat 将安装包移动到opt目录下 配置systemd控制 验证访…

Kafka基础理论与常用命令详解(超详细)

文章目录 前言一、Kafka概述1. Kafka简介2. Kafka架构2.1 Broker&#xff08;代理服务器&#xff09;2.2 Topic&#xff08;主题&#xff09;2.3 Producer&#xff08;生产者&#xff09;2.4 Consumer&#xff08;消费者&#xff09;2.5 Consumer Group&#xff08;消费者组&am…

从开源项目中学习如何自定义 Spring Boot Starter 小组件

前言 今天参考的开源组件Graceful Response——Spring Boot接口优雅响应处理器。 具体用法可以参考github以及官方文档。 基本使用 引入Graceful Response组件 项目中直接引入如下maven依赖&#xff0c;即可使用其相关功能。 <dependency><groupId>com.feiniaoji…

天翼云盘秒变硬盘分享

https://cloud.189.cn/web/share?codeAvUnqaj6NNza&#xff08;访问码&#xff1a;wf4r&#xff09;y 以下介绍为作者开发的单机版软件&#xff0c;可用于Windows环境中将天翼云盘挂载为本地硬盘&#xff0c;确实可以达到本地硬盘的使用感知&#xff0c;对于多终端数据副本一…

【动态规划】【广度优先搜索】LeetCode:2617 网格图中最少访问的格子数

本文涉及的基础知识点 二分查找算法合集 动态规划 题目 给你一个下标从 0 开始的 m x n 整数矩阵 grid 。你一开始的位置在 左上角 格子 (0, 0) 。 当你在格子 (i, j) 的时候&#xff0c;你可以移动到以下格子之一&#xff1a; 满足 j < k < grid[i][j] j 的格子 (i,…

持续集成交付CICD:CentOS 7 安装SaltStack

目录 一、理论 1.SaltStack 二、实验 1.主机一安装master 2.主机二安装第一台minion 3.主机三安装第二台minion 4.测试SaltStack 三、问题 1.CentOS 8 如何安装SaltStack 一、理论 1.SaltStack &#xff08;1&#xff09;概念 SaltStack是基于python开发的一套C/S自…

Nginx 服务器安装及配置文件详解

1. 安装nginx 1.1 选择稳定版本 我们编译安装nginx来定制自己的模块&#xff0c;机器CentOS 6.2 x86_64。首先安装缺少的依赖包&#xff1a; # yum -y install gcc gcc-c make libtool zlib zlib-devel openssl openssl-devel pcre pcre-devel 这些软件包如果yum上没有的话…

一篇文章讲透TCP/IP协议

1 OSI 7层参考模型 2 实操连接百度 nc连接百度2次&#xff0c;使用命令netstat -natp查看就会重新连接一次百度 请求百度 3 三次握手、socket 应用层协议控制长连接和短连接 应用层协议->传输控制层&#xff08;TCP UDP&#xff09;->TCP&#xff08; 面向连接&am…

Numpy 实现C4.5决策树

C4.5 信息增益比实现决策树 信息增益比 g R ( D , A ) g ( D , A ) H ( D ) g_{R}(D, A)\frac{g(D, A)}{H(D)} gR​(D,A)H(D)g(D,A)​ 其中&#xff0c; g ( D , A ) g(D,A) g(D,A)是信息增益&#xff0c; H ( D ) H(D) H(D)是数据集 D D D的熵 代码实现 import numpy as …

SQLE 3.0 部署实践

来自 1024 活动的投稿系列 第一篇《SQLE 3.0 部署实践》 . 作者&#xff1a;张昇&#xff0c;河北东软软件有限公司高级软件工程师&#xff0c;腾讯云社区作者。 爱可生开源社区出品&#xff0c;原创内容未经授权不得随意使用&#xff0c;转载请联系小编并注明来源。 本文共 32…

Axure自定义元件

目录 1.processOne的使用 ​编辑2.自定义元件的使用、 2.1如何自定义一个元件 2.2使用自定义元件 导语&#xff1a; Axure是绘制原型图的软件&#xff0c;但是我们很多时候不知道&#xff0c;画哪一个板块&#xff0c;所以流程图的绘制也是非常重要的 1.processOne的使用…

Vue2.x源码:new Vue()做了啥

例子1new Vue做了啥?new Vue做了啥,源码解析 initMixin函数 初始化 – 初始化Vue实例的配置initLifecycle函数 – 初始化生命周期钩子函数initEvents – 初始化事件系统初始化渲染 initRender初始化inject选项 例子1 <div id"app"><div class"home&…

【Jenkins】节点 node、凭据 credentials、任务 job

一、节点 node Jenkins在安装并初始化完成后&#xff0c;会有一个主节点&#xff08;Master Node&#xff09;&#xff0c;默认情况下主节点可以同时运行的任务数是2&#xff0c;可以在节点配置中修改&#xff08;系统管理/节点和云管理&#xff09;。 Jenkins中的节点&#…

实战——Mac M2 安装mat工具

线上环境出现内存飙升的情况&#xff0c;需要工具定位问题发生点就需要用到mat工具了&#xff0c;之前都是在intel芯片环境上安装的&#xff0c;现在换了m2芯片&#xff0c;导致出现了问题&#xff0c;经过一系列调研都解决了&#xff0c;特此记录下&#xff0c;以备后查 开发…

Linux汇编语言编程-汇编语言

术语 Figure 3-13. 8086 Computer (Partial Model) reg 代表寄存器。 它可以是表 3.13 中列出的任何寄存器。 imm 代表立即数【immediate】&#xff08;可以理解为字面量&#xff0c;常量&#xff09;。 术语“立即数【immediate】”用于指代直接由十进制或十六进制表示形式给…