微信小程序全局数据共享

1.概念

全局数据共享(又叫做:状态管理)是为了解决组件之间数据共享的问题。

2.小程序中共享方案

在小程序中,可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享mobx-miniprogram用来创建Store实例对象
mobx-miniprogram-bindings用来把Store中的共享数据或方法,绑定到组件或页面中使用 

3.Mobx相关的包


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

4.将store中的成员绑定到页面中

4.1创建store.js

// 创建store实例对象
// 引入observable是定义store的包,action是定义修改store数据的包
import {observable,action
} from "mobx-miniprogram"
// 通过observalbe方法就可以创建store
export const store = observable({// 数据字段-共享的数据numA: 1,numB: 2,// 计算属性 get代表就是只读的get sum() {return this.numA + this.numB},// action方法,用来修改store中的数据(外界数据是不能更改的)// action方法包裹方法才行updateNum1: action(function (step) {this.numA += step}),updateNum2: action(function (step) {this.numB += step})
})

4.2.页面js文件

// 这个函数用于将 MobX store 绑定到小程序的页面
import {createStoreBindings} from "mobx-miniprogram-bindings"
// 引入store
import {store} from "../../store/store"* 生命周期函数--监听页面加载*/onLoad(options) {// this指的是当前页面,当函数执行完成后,有一个返回值,挂在在页面上,作为属性// {包含是三个属性}// store数据源,fields需要的字段或者属性,绑定在页面上,actions保存需要的方法this.storeBindings= createStoreBindings(this,{store,fields:['numA','numB','sum'],actions:['updateNum1']})},

4.3contact.wxml文件

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

4.4contact.js文件

  btnHandler(e){this.updateNum1(e.target.dataset.step)},

4.5页面展示

5. 将store中的成员绑定到组件中

5.1组件的js

import {storeBindingsBehavior} from "mobx-miniprogram-bindings"
import {store} from "../../store/store"behaviors:[storeBindingsBehavior],storeBindings:{//数据源store,fields:{//映射关系numA:"numA",numB:"numB",sum:"sum"},actions:{updateNum2:"updateNum2"}},

5.2组件的wxml文件

<view>{{numA}}+{{numB}}={{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">numA+1</van-button>
<van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">numA-1</van-button>

5.3 组件js文件

  methods: {btnHandler2(e){this.updateNum2(e.target.dataset.step)}}

5.4页面展示

 

 

 

 

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

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

相关文章

浅谈Unicode与UTF-8

我们都知道&#xff0c;在Golang中字符都是以UTF-8编码的形式存储&#xff0c;当我们使用range遍历字符串的时候&#xff0c;go会为我们取出一个字符(rune)而不是一个byte&#xff0c;例如以下例子&#xff0c;我们使用range迭代取出第一个字符“你”&#xff0c;并且打印输出取…

让你不再好奇音频转换格式软件免费有哪些

小美&#xff1a;你好&#xff0c;最近我需要将一些音频文件转换成其他格式&#xff0c;但是不知道常用的音频转换工具有哪些&#xff0c;你有什么建议吗&#xff1f; 李明&#xff1a;当然&#xff0c;有很多音频转换工具可以选择。建议你关注下这篇文章&#xff0c;我将通过…

【动手学习深度学习--逐行代码解析合集】06多层感知机的从零开始实现

【动手学习深度学习】逐行代码解析合集 06多层感知机的从零开始实现 视频链接&#xff1a;动手学习深度学习–softmax回归简洁实现 课程主页&#xff1a;https://courses.d2l.ai/zh-v2/ 教材&#xff1a;https://zh-v2.d2l.ai/ 1、多层感知机 2、从线性到非线性 3、激活函数 R…

ChatGPT应用工具推荐

ChatGPT作为一种先进的自然生成技术&#xff0c;已经在各个领域展现出了其强大的应用能力&#xff0c;下面将给大家介绍一些ChatGPT的功能应用。 简介 此系统是基于likeadmin—PHP开发的智能对话系统&#xff0c;ChatGPT是一种基于人工智能技术的聊天机器人&#xff0c;它可以…

亚马逊云科技推出Amazon AppFabric,SaaS安全不断加码

亚马逊云科技近日宣布推出Amazon AppFabric来增强公司在软件即服务&#xff08;SaaS&#xff09;应用程序方面的现有投入。Amazon AppFabric是一项无代码服务&#xff0c;可以为客户提高安全性&#xff0c;管理水平和生产力。只需在亚马逊云科技管理控制台上点击几下&#xff0…

机器学习之深度神经网络

目录 卷积神经网络与全连接神经网络 前向后向传播推导 通用手写体识别模型 人脸识别模型 电影评论情感分析模型 卷积神经网络与全连接神经网络 卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;和全连接神经网络&#xff08;Fully Conn…

单片机STM32看门狗详解(嵌入式学习)

单片机STM32看门狗 什么是看门狗为什么需要看门狗&#xff1f;STM32CubeMX配置和应用示例独立看门狗&#xff08;IWDG&#xff09;窗口看门狗&#xff08;WWDG&#xff09; 注意事项 什么是看门狗 单片机STM32的看门狗&#xff08;Watchdog&#xff09;是一种硬件定时器&#…

动态ip与静态ip的概念、区别、应用场景

动态ip与静态ip的区别 前言一、介绍IP地址的概念和作用1.1、IP地址的定义1.2、IP地址的作用 二、动态IP和静态IP的区别2.1、动态IP和静态IP的定义2.2、动态IP和静态IP的特点2.3、动态IP和静态IP的优缺点比较 三、动态IP和静态IP的应用场景3.1. 动态IP的应用场景3.2. 静态IP的应…

SQL死锁

目录 前言&#xff1a; 分析&#xff1a; 死锁产生的原因&#xff1a; sql死锁 模拟&#xff1a; 解决办法&#xff1a; (本质&#xff1a;快速筛选或高效处理、以此减少锁冲突) ①大事务拆成小事务&#xff0c;尽可能缩小事务范围 大事务:将多个操作放在一个事务中执行…

SpringBoot - 在IDEA中经常发现:Could not autowire. No beans of ‘xxx‘ type found的错误

错误描述 在SPRINGBOOT的项目中&#xff0c;使用IDEA时经常会遇到Could not autowire. No beans of ‘xxxx’ type found的错误提示&#xff0c;但是程序的编译和运行都没有问题&#xff0c;这个错误提示并不影响项目的生产。 解决方案

Vue中如何进行状态持久化(LocalStorage、SessionStorage)

Vue中如何进行状态持久化&#xff08;LocalStorage、SessionStorage&#xff09;&#xff1f; 在Vue应用中&#xff0c;通常需要将一些状态进行持久化&#xff0c;以便在用户关闭浏览器或刷新页面后&#xff0c;仍能保留之前的状态。常见的持久化方式包括LocalStorage和Sessio…

深入理解 Golang: Channel 管道

Channel 的使用 Channel 声明方法 chInt : make(chan int) // unbuffered channel 非缓冲通道chInt : make(chan int, 0) // unbuffered channel 非缓冲通道chInt : make(chan int, 2) // bufferd channel 缓冲通道 Channel 基本用法 ch <- x // channel 接收数据 xx &l…