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

开发工具:微信开发者工具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'],actions: ['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)},

3、使用效果

在一个页面中修改全局数据,另一个页面的数据也会被修改

五、MobX在组件中的使用

1、创建全局数据store

这个和上面的一样

2、使用全局数据store

引入 storeBindingsBehavior 和store

behaviors 绑定引入的 storeBindingsBehavior

把数据源里的数据和方法都赋值过来

fields 的赋值用数组和对象都可以,actions也一样,用数组和对象都可以,用数组写起来简单点

// components/numbers/numbers.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'Component({behaviors: [storeBindingsBehavior],storeBindings: {// 数据源store,fields: {numA: 'numA',numB: 'numB',sum: 'sum'},actions: {updateNum2: 'updateNum2'}}})

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

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

相关文章

【深度学习_TensorFlow】激活函数

写在前面 上篇文章我们了解到感知机使用的阶跃函数和符号函数&#xff0c;它们都是非连续&#xff0c;导数为0的函数&#xff1a; 建议回顾上篇文章&#xff0c;本篇文章将介绍神经网络中的常见激活函数&#xff0c;这些函数都是平滑可导的&#xff0c;适合于梯度下降算法。 写…

【知识产权】专利的弊端

接上篇【知识产权】著作权的作用_qilei2010的博客-CSDN博客。 ​ 1 专利的分类 首先,专利分为:发明专利、实用新型专利、外观设计专利。这里要说明的是专利的不同种类在不同的国家都是有不同规定的,并不是所有国家和地区都是分成这三类。 >国家法律法规数据库 >中华…

redis入门2-命令

Redis的基本数据类型 redis的基本数据类型&#xff08;value&#xff09;: string,普通字符串 hash&#xff08;哈希&#xff09;,适合存储对象 list(列表),按照插入顺序排序&#xff0c;可以由重复的元素 set(无序集合)&#xff0c;没有重复的元素 sorted set(有序集合)&…

Spring集成Web

目录 1、简介 2、监听器 3、Spring提供的listener 3.1、xml 3.2、配置类 3.3、WebApplicationContextUtils 3.4、说明 4、自己复现的listener 4.1、ContextLoaderListener 4.2、WebApplicationContextUtils 4.3、Web调用 ⭐作者介绍&#xff1a;大二本科网络工程专业…

JVM相关知识

JVM主要有堆、方法区、虚拟机栈、本地方法栈、程序计数器组成 线程私有区域&#xff1a; 程序计数器&#xff1a;字节码执行的都有一个编号&#xff0c;就是程序计数器&#xff0c;解释器按这个计数器执行字码&#xff0c;将字节码转换为机器码给cpu运行。其二就是多线程中&a…

【C++】开源:ncurses终端TUI文本界面库

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍ncurses终端文本界面库。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下…

【计算机视觉】干货分享:Segmentation model PyTorch(快速搭建图像分割网络)

一、前言 如何快速搭建图像分割网络&#xff1f; 要手写把backbone &#xff0c;手写decoder 吗&#xff1f; 介绍一个分割神器&#xff0c;分分钟搭建一个分割网络。 仓库的地址&#xff1a; https://github.com/qubvel/segmentation_models.pytorch该库的主要特点是&#…

运输层---概述

目录 运输层主要内容一.概述和传输层服务1.1 概述1.2 传输服务和协议1.3 传输层 vs. 网络层1.4 Internet传输层协议 二. 多路复用与多路分解&#xff08;解复用&#xff09;2.1 概述2.2 无连接与面向连接的多路分解&#xff08;解复用&#xff09;2.3面向连接的多路复用*2.4 We…

STM32刷Micropython固件参考指南

STM32刷Micropython固件指南 其实刷固件和普通的程序下载烧录无多大的差异&#xff0c;主要是其他因数的影响导致刷固件或刷完固件无法运行的情况和相关问题。 &#x1f4d1;刷固件教程 固件下载。目前所支持的stm32型号有这些&#xff1a; stm32f0, stm32f4, stm32f7, stm32g…

基于C#的窗体阴影效果方案 - 开源研究系列文章

最近在研究C#的Winform窗体的效果&#xff0c;上次介绍了窗体动画效果的博文( 基于C#的无边框窗体动画效果的完美解决方案 - 开源研究系列文章 )&#xff0c;这次将窗体阴影效果的方案进行一个介绍。 找了一下度娘&#xff0c;具体窗体阴影效果就两种方法&#xff1a;直接绘制和…

Spring:JDBCTemplate

JDBCTemplate 概述 概述 JDBC&#xff08;Java DataBase Connectivity&#xff0c;Java 数据库连接&#xff09;&#xff0c; 一 种用于执行 SQL 语句的 Java API&#xff08;Application Programming Interface &#xff0c; 应用程序设计接口 &#xff09;&#xff0c;可以为…

数学知识(二)

一、裴蜀定理 对于任意整数a,b&#xff0c;一定存在非零整数x,y&#xff0c;使得 ax by gcd(a,b) #include<iostream> #include<algorithm>using namespace std;int exgcd(int a,int b,int &x,int &y) {if(!b){x 1,y 0;return a;}int d exgcd(b,a %…