微信小程序状态管理与计算属性同时使用:miniprogram-computed 和 mobx-miniprogram
- 两个框架扩展提供的
ComponentWithStore
与ComponentWithComputed
方法无法结合使用。 - 如果需要在一个组件中既想使用
mobx-miniprogram-bindings
又想使用miniprogram-computed
解决方案是:-
使用旧版
API
- 自定义组件仍然使用
Component
方法构建组件,将两个扩展依赖包的使用全部改为旧版API
- mobx-miniprogram-bindings 官方文档
- miniprogram-computed 官方文档
- 自定义组件仍然使用
-
使用兼容写法
-
即要么使用
ComponentWithStore
方法构建组件,要么使用ComponentWithComputed
方法构建组件 -
如果使用了
ComponentWithStore
方法构建组件,计算属性写法使用旧版API
-
如果使用了
ComponentWithComputed
方法构建组件,Mobx写法使用旧版API
-
-
一、安装 miniprogram-computed 和 mobx-miniprogram
- 在项目的根目录下,使用如下命令,将快速在根目录下初始化生成一个
package.json
文件npm init -y
- 安装 miniprogram-computed 和 mobx-miniprogram
npm install miniprogram-computed
npm install mobx-miniprogram mobx-miniprogram-bindings
- 然后 在
微信开发者工具
的左上角 点击 》工具》 构建 npm,构建成功后,将会在项目根目录下生成miniprogram_npm
文件夹,可以在miniprogram_npm
文件夹中看见构建的结果
二、在 ComponentWithStore 构建的组件中使用 计算属性
-
在项目的根目录下的 components 文件夹中(没有该文件夹的需要自己创建)新建 custom04 文件夹,并在该文件夹中创建 custom04组件(在文件夹上点击鼠标右键,选择
新建 component
) -
找到项目根目录下的
app.json
文件,增加如下代码,将 custom04组件注册为 全局组件{// ...其他配置项"usingComponents": {"custom04": "./components/custom04/custom04"} }
-
在
pages/index.wxml
中使用 custom04 组件<custom04 />
-
修改
components/custom04/custom04.js
文件,Component
方法替换成ComponentWithStore
方法// components/custom04/custom04.js import {ComponentWithStore } from 'mobx-miniprogram-bindings'// 导入计算属性 behavior const computedBehavior = require('miniprogram-computed').behaviorComponentWithStore({// storeBindings 不再复述// 注册 behaviorbehaviors: [computedBehavior],data: {a: 1,b: 2},computed: {total(data) {console.log('q23');return data.a + data.b}},watch: {'a,b': function (a, b) {console.log(`a更新之后的数据:` + a);console.log(`b更新之后的数据:` + b);}},methods: {updateData() {this.setData({a: this.data.a + 1,b: this.data.b + 1})}}})
-
修改
components/custom04/custom04.wxml
文件<view>{{a}} + {{b}} = {{total}}</view> <button type="warn" bind:tap="updateData">修改数据</button>
三、在 ComponentWithComputed 构建的组件中使用 状态管理
-
在项目的根目录下创建
stores
文件夹,然后在该文件夹下新建numStore.js
文件 -
在
/stores/numStore.js
导入observable
、action
方法。使用observable
方法需要接受一个store
对象,存储应用的状态import {observable,action } from 'mobx-miniprogram'export const numStore = observable({numA: 1,numB: 2,// 使用 action 更新 numA 以及 numBupdate: action(function () {this.numA += 1this.numB += 1}),// 计算属性,使用 get 修饰符,get sum() {return this.numA + this.numB;} })
-
在项目的根目录下的 components 文件夹中(没有该文件夹的需要自己创建)新建 custom05 文件夹,并在该文件夹中创建 custom05组件(在文件夹上点击鼠标右键,选择
新建 component
) -
找到项目根目录下的
app.json
文件,增加如下代码,将 custom05 组件注册为 全局组件{// ...其他配置项"usingComponents": {"custom05": "./components/custom05/custom05"} }
-
在
pages/index.wxml
中使用 custom05 组件<custom05 />
-
修改
components/custom05/custom05.js
文件,Component
方法替换成ComponentWithComputed
方法// components/custom05/custom05.js import {ComponentWithComputed } from 'miniprogram-computed'import {storeBindingsBehavior } from 'mobx-miniprogram-bindings'import {numStore } from '../../stores/numStore'ComponentWithComputed({behaviors: [storeBindingsBehavior],storeBindings: {store: numStore,fields: ['numA', 'numB', 'sum'],actions: ['update']} })
-
修改
components/custom05/custom05.wxml
文件<!--components/custom05/custom05.wxml--> <view>{{numA}} + {{numB}} = {{sum}}</view> <button type="primary" bind:tap="update">更新store 中的数据</button>
相关文章:
微信小程序状态管理与计算属性同时使用:miniprogram-computed 和 mobx-miniprogram
两个框架扩展提供的 ComponentWithStore 与 ComponentWithComputed 方法无法结合使用。如果需要在一个组件中既想使用 mobx-miniprogram-bindings 又想使用 miniprogram-computed解决方案是: 使用旧版 API 自定义组件仍然使用 Component 方法构建组件,将…...
Redis设置开机自启报错start-limit-hit
Redis设置开机自启报错start-limit-hit 问题:在银河麒麟服务器上编译安装了redis后设置systemctl开机自启报错start-limit-hit 如何解决? 因为开机自启的需求是后面新增的,所以一开始使用的是命令启动,使用命令启动就会直接在前台…...
[数据结构]排序之 归并排序(有详细的递归图解)
一、非递归 基本思想: 归并排序( MERGE-SORT )是建立在归并操作上的一种有效的排序算法 , 该算法是采用分治法( Divide andConquer)的一个非常典型的应用。将已有序的子序列合并,得到完全有序的序列&#x…...
pdf文件分页按需查看
pdf预览本来打算粗暴点,一次性查看全部,但是一个pdf四五百页导致手机端查看超出内存直接崩掉,崩掉会导致页面疯狂刷新,所以不得不进行优化 解决思路大致如下: canvas转为blob格式以图片的形式加载在页面(B…...
栈/堆/static/虚表
在 C 里,栈空间主要用来存放局部变量、函数调用信息等。下面为你介绍栈空间在 C 里的运用方式。 1. 局部变量的使用 在函数内部定义的变量会被存于栈空间,当函数执行结束,这些变量会自动被销毁。 #include <iostream>void exampleFu…...
计算机网络技术服务管理基于Spring Boot-SSM
目录 一、引言 二、用户需求分析 三、功能介绍 3.1.资源管理: 3.2.故障管理: 3.3.性能管理: 3.4.安全管理: 3.5.配置管理: 3.6.日志管理: 3.7.用户管理࿱…...
Redisson 分布式锁原理
加锁原理 # 如果锁不存在 if (redis.call(exists, KEYS[1]) 0) then# hash结构,锁名称为key,线程唯一标识为itemKey,itemValue为一个计数器。支持相同客户端线程可重入,每次加锁计数器1.redis.call(hincrby, KEYS[1], ARGV[2], 1);# 设置过期时间redis.call(pexpi…...
LLM(5):了解 GPT 架构
1.6 对 GPT 架构的更深入了解 GPT 最初由 OpenAI 的 Radford 等人在论文《通过生成式预训练提高语言理解能力》 中提出。GPT-3 是该模型的扩展版本,具有更多的参数,并且使用了更大的数据集进行训练。此外,ChatGPT 中提供的原始模型是通过在大…...
Android Zygote 启动流程梳理
和你一起终身学习,这里是程序员Android 本篇文章主要介绍 Android Zygote 启动分析 知识点,通过阅读本篇文章,您将收获以下内容: 一、Android 系统基本服务二、虚拟机创建和第一个Java 程序引导三、Dalvik 虚拟机基本配置四、Zygote 启动流程…...
华为OD机试-绘图机器-双指针(Java 2025 A卷 100分)
题目描述 绘图机器的绘图笔初始位置在原点 (0, 0)。机器启动后按照以下规则绘制直线: 尝试沿着横坐标正向绘制直线,直到给定的终点 E。期间可以通过指令在纵坐标轴方向进行偏移,offsetY 为正数表示正向偏移,为负数表示负向偏移。给定的横坐标终点值 E 以及若干条绘制指令,…...
ESP32(1)基于ESP32的lwIP了解
ESP32-S3 是一款集成了 Wi-Fi 和蓝牙功能的微控制器,而 lwIP(轻量级 IP)是一个为嵌入式系统设计的开源 TCP/IP 协议栈。通过使用 lwIP 库, ESP32-S3 可以实现与外部网络的通信,包括发送和接收数据包、处理网络连接等。…...
C语言预处理详解
目录 (一)预处理符号 (二)define定义常量和宏 (三)#符号和##符号 (四)undef符号的条件编译 (五)头文件的包括 (一)预处理符号 在…...
python实现接口自动化
代码实现自动化相关理论 代码编写脚本和工具实现脚本区别是啥? 代码: 优点:代码灵活方便缺点:学习成本高 工具: 优点:易上手缺点:灵活度低,有局限性。 总结: 功能脚本:工…...
当Anaconda的安装路径与我想创建的conda虚拟环境路径不一致时,应该怎么操作?
我的anaconda安装在该路径:D:\Program\anaconda3 , 如果我想在F盘创建一个虚拟环境 应该怎么做呢? 若你想在 F 盘创建 Anaconda 虚拟环境,可使用 conda create 命令,并通过 --prefix 参数指定环境路径。以下是详细步骤࿱…...
MongoDB慢日志查询及索引创建
MongoDB 的慢日志(Slow Query Log)对于运维和程序员来说都非常重要,因为它直接关系到数据库的性能和应用程序的稳定性。以下分享介绍下MongoDB慢日志查询及索引创建相关的一些笔记。 一,准备 1. 使用 db.currentOp() 实时监控 …...
C语言指针(详细总结)
目录 1.初始C指针 几个重要的概念: 指针的加减 &与* 二级指针 2.指针与数组 指针数组 数组指针变量 一维数组与二维数组传参的本质 编辑编辑 编辑 3.指针与函数 函数指针数组 4.指针与结构体 5.野指针以及常见的内存管理错误 常见的内存错…...
服务器部署Kong和Konga过程
前言 最近在想怎么将一个接口给外部提供服务,并且可以根据和对放的关系,设置不同的期限或者服务大小?并且有友好的可视化页面! 这让我了解到了 API 网关,所以我开始研究 Kong 和 Konga 的使用。 实际上我最开始研究的apisix,但是部署了好久因为etcd不支持 http 无法连接…...
stm32第五天按键的基础知识
一:按键连接示意图 按键控制LED灯 软件设计流程 初始化系统 o 初始化GPIO外设时钟 o 初始化按键和LED的引脚 • 检测按键输入电平来控制LED灯 o SW2控制灯开 。 SW3控制灯关 1:key.c工程 #include"key.h" #include"stm32f10x.h"v…...
高主频CPU+RTX4090:AI生图性能优化超150%
概述:消费级高主频CPU搭配 RTX 4090显卡可以显著提高AI生图的性能,相比于企业级CPU具有更大的吞吐量和更优的成本效益。 引言:在AI图像生成过程中,CPU与GPU的协同效应对系统的整体性能至关重要。测试表明,与RTX 4090显…...
自学Python创建强大AI:从入门到实现DeepSeek级别的AI
人工智能(AI)是当今科技领域最热门的方向之一,而Python是AI开发的首选语言。无论是机器学习、深度学习还是自然语言处理,Python都提供了丰富的库和工具。如果你梦想创建一个像DeepSeek这样强大的AI系统,本文将为你提供…...
主流区块链
文章目录 主流链1. Solana特点:适用场景:工具链: 2. Binance Smart Chain (BSC)特点:适用场景:工具链: 3. Avalanche特点:适用场景:工具链: 4. Polkadot特点:…...
DevEco Studio的使用
目录 1.创建ArkTS工程 2.ArkTS工程目录结构(Stage模型) 构建第一个页面 构建第二个页面 实现页面间的跳转 1.创建ArkTS工程 若首次打开DevEco Studio,请点击Create Project创建工程。如果已经打开了一个工程,请在菜单栏选择…...
Oracle 公布 Java 的五大新功能
Java 增强提案包括语言增强和性能优化,从 JDK 25 中的稳定值 API 开始。 随着JDK(Java 开发工具包)24刚刚全面上市,Oracle 提前透露了不久的将来即将推出的 Java 功能,包括增强原始装箱到空限制值类类型。 3 月 18 日…...
checkpoint机制
1、什么是checkpoint 将缓冲池中的脏页刷新到磁盘,并更新redo log的checkpoint位点,确保数据库在发生故障时可以快速恢复到一致的状态。 2、checkpoint执行过程 确保需要刷新的脏页:从缓冲池中选取一部分需要刷新的页数据页刷新࿱…...
MySQL函数大全(持续更新)
MySQL常用函数 一、字符串函数 函数功能 CONCAT(s1, s2, ...) 拼接字符串 CONCAT_WS(sep, s1, s2, ...) 指定分隔符拼接字符串 SUBSTRING(str, start, length) 截取字符串 LEFT(str, length) 从左边截取指定长度字符串 RIGHT(str, length) 从右边截取指定长度字符串 LENGTH(s…...
商业智能BI分析中,汽车4S销售行业的返厂频次有什么分析价值?
买过车的朋友会发现,同一款车不管在哪个4S店去买,基本上价格都相差不大。即使有些差别,也是带着附加条件的,比如要做些加装需要额外再付一下费用。为什么汽车4S销售行业需要商业智能BI?就是因为在汽车4S销售行业&#…...
51单片机程序变量作用域问题
问题: //为什么下面这个程序可以运行 #include <REGX52.H> #include "LCD1602.h" #include "Delay.h" unsigned int result 0; void main(){LCD_Init();while(1){LCD_ShowNum(1,1,result,3);Delay(200);result;}; } //但是这样会报错&a…...
力扣算法ing(33 / 100)
3.20 146.LRU缓存 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类: LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中,则返回关键字的值&…...
基于springboot的母婴商城系统(018)
摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本母婴商城系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数据信息&am…...
【数学建模】模糊综合评价模型详解、模糊集合论简介
模糊综合评价模型详解 文章目录 模糊综合评价模型详解1. 模糊综合评价模型概述2. 模糊综合评价的基本原理2.1 基本概念2.2 评价步骤 3. 模糊综合评价的数学模型3.1 数学表达3.2 模糊合成运算 4. 模糊综合评价的应用领域5. 模糊综合评价的优缺点5.1 优点5.2 缺点 6. 模糊综合评价…...
BSCAN2-1:load design
1. DFT Flow Using Tessent Shell Tessent BoundaryScan 具有一个基本的高层次流程顺序。下图展示了将 Tessent BoundaryScan 插入设计所需的高层次步骤顺序。图中的每个步骤都链接到有关可测试性设计(DFT)流程的更详细信息,包括示例。 Desi…...
Pytorch中layernorm实现详解
平时我们在编写神经网络时,经常会用到layernorm这个函数来加快网络的收敛速度。那layernorm到底在哪个维度上进行归一化的呢? 一、问题描述 首先借用知乎上的一张图,原文写的也非常好,大家有空可以去阅读一下,链接放…...
Redis HyperLogLog
Redis HyperLogLog HyperLogLog 是 Redis 提供的一种基数估算(Cardinality Estimation)数据结构,专门用于统计去重元素的数量(近似值)。 1. HyperLogLog 特点 ✅ 节省内存:无论存储的元素有 10 个 还是 …...
【微服务日志收集①】使用FileBeat+Logstash+ES搭建ELK日志系统
使用FileBeatLogstashES搭建ELK日志系统,架构图如下: 1、 使用docker快速创建ES服务和Kibana服务 前置条件:需要在linux上提前安装好docker和docker-compose 1.1、在linux创建好一个用于存放docker-compose配置文件的文件夹 我的目录是/app/…...
【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit(10)
1.问题描述: 离线推送,锁屏的时候没有弹出消息,只有下拉在通知中心里面显示。请问是否是正常的? 解决方案: 检查一下是否存在图片风控:https://developer.huawei.com/consumer/cn/doc/harmonyos-referen…...
Django之旅:第二节--启动运行django
1、确保app已配置完(settings.py文件里面配置) INSTALLED_APPS [django.contrib.admin,django.contrib.auth,django.contrib.contenttypes,django.contrib.sessions,django.contrib.messages,django.contrib.staticfiles,app.apps.AppConfig #配置已经注册好的app…...
Redis Sentinel(哨兵模式)高可用性解决方案
一、概述 Redis Sentinel(哨兵模式)是Redis的高可用性(High Availability, HA)解决方案,它通过哨兵系统和Redis实例的协同工作,确保了Redis服务的高可用性和数据的持久性。哨兵系统由一个或多个哨兵进程组…...
Redis缓存与数据库 数据一致性保障
为什么要保证数据一致性 只要使用redis做缓存,就必然存在缓存和DB数据一致性问题。若数据不一致,则业务应用从缓存读取的数据就不是最新数据,可能导致严重错误。比如将商品的库存缓存在Redis,若库存数量不对,则下单时…...
Grid 布局实现三栏布局
使用 CSS Grid 布局实现三栏布局(左右固定 100px,中间自适应)的核心原理是通过网格模板精确控制列宽分配。以下是具体实现方法及优化技巧: 一、基础实现 父容器设置 为外层容器添加 display: grid 使其成为网格容器,并通过 grid-template-columns 定义列宽 css .contain…...
如何在 HTML 中创建一个有序列表和无序列表,它们的语义有何不同?
大白话如何在 HTML 中创建一个有序列表和无序列表,它们的语义有何不同? 1. HTML 中有序列表和无序列表的基本概念 在 HTML 里,列表是一种用来组织信息的方式。有序列表就是带有编号的列表,它可以让内容按照一定的顺序呈现&#…...
springboot第三站(1) web开发引入
目录 1.简介 2.SpringBoot对静态资源的映射规则 3.模版引擎 1.简介 使用SpringBoot; 1)、创建SpringBoot应用,选中我们需要的模块; 2)、SpringBoot已经默认将这些场景配置好了,只需要在配置文件中指定…...
nginx 简单实践:负载均衡【nginx 实践系列之四】
〇、前言 本文为 nginx 简单实践系列文章之三,主要简单实践了负载均衡,仅供参考。 注意:可以使用测试域名,但前提是要修改 hosts 文件 路径和重启:Linux(/etc/hosts)(重启命令&#…...
CentOS 7.9 安装 Python 3.10 详细步骤及常见问题解决
一、环境准备与依赖安装 更新系统与开发工具 sudo yum update -y sudo yum groupinstall "Development Tools" -y sudo yum install -y zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel \ readline-devel tk-devel libffi-devel gdbm-devel db4-de…...
计算机网络-1-1计算机网络体系结构
第一章计算机网络体系结构 绪论 《计算机网络》学什么?——数据如何通过网络正确、可靠地从A传送到B 【考纲内容】 (一)计算机网络概述 计算机网络的概念、组成与功能;计算机网络的分类; 计算机网络的性能指标 (二)计算机网…...
集装箱箱号OCR识别技术,在铁路物流场站集装箱装卸机械数字化系统中的应用
集装箱装卸机械数字化是针对铁路物流场站的门式起重机、集装箱正面吊运起重机、重型叉车、堆高机等作业设备,在不影响原设备作业性能情况下,通过增加或集成集装箱箱号OCR识别或者车号识别装置、北斗定位装置、PLC采集装置等,利用多种通信协议…...
数仓工具—Hive语法之不同纬度聚合
不同纬度聚合 提到不同纬度聚合,大家想到的肯定是grouping sets,或者是cube和rollup 其实这些我们之前都讲过,可以看看之前的文章 数仓工具—Hive语法之cube和rollup 数仓工具—Hive语法之grouping sets 但是我们今天遇到的问题是,使用的工具不支持grouping sets,既然…...
GitHub在push推送到远程仓库的时候显示Logon failed登录失败
具体问题描述 git.exe push --progress "origin" master:master Logon failed, use ctrlc to cancel basic credential prompt. remote: Support for password authentication was removed on August 13, 2021. 这是因为Git 推送失败的原因是 GitHub 已经不支持密码认…...
【Dive Into Stable Diffusion v3.5】1:开源项目正式发布——深入探索SDv3.5模型全参/LoRA/RLHF训练
目录 1 引言2 项目简介3 快速上手3.1 下载代码3.2 环境配置3.3 项目结构3.4 下载模型与数据集3.5 运行指令3.6 核心参数说明3.6.1 通用参数3.6.2 优化器/学习率3.6.3 数据相关 4 结语 1 引言 在人工智能和机器学习领域,生成模型的应用越来越广泛。Stable Diffusion…...
2025-03-19 Unity 网络基础2——网络通信基础
文章目录 1 数据通信模型1.1 C/S 模型1.2 B/S 模型1.3 P2P 模型1.4 小结 2 网络协议2.1 OSI 模型2.1.1 下层2.1.2 上层 2.2 TCP/IP 协议2.2.1 TCP 协议2.2.2 UDP 协议 3 网络游戏通信方案3.1 强/弱弱联网游戏3.2 长/短连接游戏3.3 相关术语 1 数据通信模型 在早期的计算机网…...
路由器安全研究:D-Link DIR-823G v1.02 B05 复现与利用思路
前言 D-Link DIR-823G v1.02 B05存在命令注入漏洞,攻击者可以通过POST的方式往 /HNAP1发送精心构造的请求,执行任意的操作系统命令。 漏洞分析 binwalk提取固件,成功获取到固件。 现在我们已经进入到应用里了,那么我们在进行分析…...