【微信小程序】全局数据共享 - 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.rhkb.cn/news/411734.html

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

相关文章

坐牢第三十一天(c++)

一.作业&#xff1a; 使用C手动封装一个顺序表&#xff0c;包含成员数组一个&#xff0c;成员变量N个 #include <iostream> #include <cstring> // 引入cstring以使用memcpy using namespace std; // 类型重命名 using datatype int; // typedef int datatype; s…

Pytorch封装简单RNN模型,进行中文训练及文本预测

简述 使用pytorch封装简单RNN模型&#xff0c;使用单层nn.RNN、nn.Linear等实现&#xff0c;然后做简单的文本预测。 数据集 代码参考李沐&#xff1a;https://zh-v2.d2l.ai/chapter_recurrent-neural-networks/rnn-concise.html&#xff0c;但他使用的是一篇英文小说&#…

通配符证书的简介和申请方法

通配符证书是一种SSL证书&#xff0c;它利用域名字段中的通配符&#xff08;*&#xff09;来指示&#xff0c;允许用户在一个证书中关联多个顶级域名及其子域&#xff0c;从而简化证书管理流程&#xff0c;节省成本和时间。以下是通配符证书的简介和申请方法的详细说明&#xf…

Springsecurity中的Eureka报错:Cannot execute request on any known server

完整报错信息&#xff1a; com.netflix.discovery.shared.transport.TransportException: Cannot execute request on any known server 报错体现&#xff1a; 访问eureka控制面板&#xff1a; 访问测试地址&#xff1a; 控制台报错&#xff1a; 可能的报错原因&#xff…

ZW3D二次开发_UI_ZsCc::OptionRadios控件回调

1.ZW3D中的OptionRadios控件如何实现点击触发回调并且获取点击后的值&#xff1f;如下图 2.教程如下&#xff1a; 1&#xff09;添加OptionRadios控件到表单中 2&#xff09;增加radio按钮 3&#xff09;添加回调 4&#xff09;编写回调函数 int radioCallbackDemo(char* for…

【信息安全】基于CBC的3DES加解密-实验报告

实验运行效果截图 3DES进行加密 3DES进行解密 然后可以选择你想要的操作,继续加密解密或者退出。 基于CBC模式的3DES加解密 一、实验内容 基于3DES加解密算法,编程实现对任意文件实现加解密的软件。 编程实现DES加密和解密算法,并使用DES加解密算法实现3DES加解密算法。选…

Android活动(activity)与服务(service)进行通信

文章目录 Android活动&#xff08;activity&#xff09;与服务&#xff08;service&#xff09;进行通信活动与服务进行通信服务的生命周期 Android活动&#xff08;activity&#xff09;与服务&#xff08;service&#xff09;进行通信 活动与服务进行通信 上一小节中我们学…

基于FPGA的SD卡的数据读写实现(SD NAND FLASH)

文章目录 目录 1、存储芯片分类 2、NOR Flash 与 NAND Flash的区别 3、什么是SD卡&#xff1f; 4、什么是SD NAND&#xff1f; 5、SD NAND的控制时序 6、FPGA实现SD NAND读写 1、存储芯片分类 目前市面上的存储芯片&#xff0c;大致可以将其分为3大类&#xff1a; ① …

【回眸】QAC软件指南——错误分析篇(完整版)

前言 近期需要再次测一下代码&#xff0c;相比以前测试更有经验&#xff0c;也做了比较多的记录&#xff0c;正好将经验通过博客保留下来&#xff0c;为以后可能的QAC测试做准备。 安装导入分析代码 这部分在上一篇中已经详细介绍&#xff0c;具体请见&#xff0c;如有疑问可…

百元蓝牙耳机什么牌子的好?四大宝藏机型真实推荐,快速收藏!

作为一位蓝牙耳机爱好者&#xff0c;无论是上班、娱乐、学习我都离不开蓝牙耳机。通勤时候能听听音乐&#xff0c;是最好的享受&#xff0c;可以让我更加放松&#xff0c;尽情享受音乐带来的乐趣。但市面上的大多数蓝牙耳机都是货不对板的&#xff0c;不是音质一般、就是续航时…

谷歌发布 3 款 Gemini 新模型;字节开源 FLUX Dev Hyper SD Lora,8 步生图丨 RTE 开发者日报

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE&#xff08;Real-Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

Seata执行原理分析-AT、XA、TCC、SAGA比较

分布式事务简介 1.1 本地事务 大多数场景下&#xff0c;我们的应用都只需要操作单一的数据库&#xff0c;这种情况下的事务称之为本地事务(Local Transaction)。本地事务的ACID特性是数据库直接提供支持。本地事务应用架构如下所示&#xff1a; 在JDBC编程中&#xff0c;我们…

priority_queue模拟

一、什么是priority_queue? priority_queue是C标准库中的一个容器适配器&#xff0c;用于实现优先队列&#xff08;priority queue&#xff09;的数据结构。优先队列是一种特殊的队列&#xff0c;其中的元素按照一定的优先级进行排序&#xff0c;每次取出的元素都是优先级最高…

从零开始掌握Vue实例

从零开始掌握Vue实例&#xff1a;深入理解数据绑定与生命周期的核心秘诀 引言 简要介绍主题&#xff1a; 在学习Vue.js的过程中&#xff0c;Vue实例是最基础也是最关键的部分。Vue实例是Vue应用的核心&#xff0c;它是数据、DOM元素和Vue组件之间的桥梁。掌握Vue实例的使用对于…

文件上传面板中限制需要的文件格式,并且隐藏“所有文件”选项

直接说需求&#xff1a;需要实现在文件上传面板中限制需要的文件格式&#xff0c;并且不想展示“所有文件”这个选项&#xff0c;应该怎么做嘞&#xff1f;效果如下图&#xff1a; 这里用到了 window.showOpenFilePicker 方法实现&#xff0c;首先定义接受的格式及限制&#xf…

格行“信号增强技术”引领行业创新,格行随身WiFi带你感受不一样的速度与激情,行业第一的随身WiFi并非浪得虚名!

近年来&#xff0c;随着市场保有量的不断提升与相关技术的不断扩展&#xff0c;我国随身WiFi市场已经到了发展质量更高的“2.0”阶段&#xff0c;消费者对随身WiFi的需求变得多元且“高级”。与之对应的供给端&#xff0c;品牌之间的竞争也从未停止&#xff0c;有的品牌选择卷价…

如何使用ssm实现实验室仪器设备管理系统

TOC ssm354实验室仪器设备管理系统jsp 绪论 1.1 研究背景 当前社会各行业领域竞争压力非常大&#xff0c;随着当前时代的信息化&#xff0c;科学化发展&#xff0c;让社会各行业领域都争相使用新的信息技术&#xff0c;对行业内的各种相关数据进行科学化&#xff0c;规范化…

快来尝尝,食家巷荞面甜甜圈超赞

当荞面与甜甜圈相遇&#xff0c;便诞生了食家巷荞面甜甜圈&#xff0c;一种独具特色的美食体验。 食家巷荞面甜甜圈&#xff0c;外形圆润可爱&#xff0c;色泽金黄诱人。那精致的环状造型&#xff0c;仿佛是一个小小的魔法圈&#xff0c;散发着迷人的魅力。 与传统甜甜圈…

计算机网络面试真题总结(七)

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 什么是对称加密、非对称加密&#xff1f; 对称加密是一种常用的加…

探索AI智能问答:改变未来交流的新动力

人工智能(AI)是当今科技领域中最具潜力和影响力的技术之一&#xff0c;AI智能问答系统更是这一领域中的一颗璀璨明珠。随着大数据和机器学习的发展&#xff0c;AI智能问答系统已经不仅仅是科幻小说中的幻想&#xff0c;而是正逐步融入我们的日常生活&#xff0c;从客户服务到教…