当前位置: 首页 > news >正文

微信小程序全局数据共享

文章目录

  • 安装MobX相关的包
  • 根目录创建store文件夹,添加store.js文件
  • 绑定到页面中
  • 绑定到组件

mobx-miniprogram和mobx-miniprogram-bindings实现全局数据共享

mobx-miniprogram用来创建Store实例对象

mobx-miniprogram-bindings用来把Store中的共享数据或方法,绑定到组件或页面中使用

安装MobX相关的包

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

注意:MobX相关的包安装完毕之后,记得删除miniprogram_npm目录后,在选项中重新构建npm。

根目录创建store文件夹,添加store.js文件

store.js

//在这个JS文件中,专门创建Store的实例对象
import {action, observable} from "mobx-miniprogram"export const store =  observable({//里面声明共享数据numA:1,numB:2,//读取get sum(){return this.numA+this.numB},//修改updateNum1:action(function(step){this.numA += step}),updateNum2:action(function(step){this.numB += step}),
})

绑定到页面中

//页面的.js文件
import{createStoreBindings } from'mobx-miniprogram-bindings'//绑定方法
import{store}from'../../store/store'//实例对象映射到当前页面Page({onLoad:function(){//生命周期函数--监听页面加载//第一个参数this代表该页面实例,第二个参数「store,fields,actios」分别代表数据源,字段,方法//自定义属性storeBindings为createStoreBindings方法的返回值this.storeBindings = createStoreBindings(this,{store,fields:['numA','numB','sum'],actions:['updateNum1']
})
},
onUnload:function(){//生命周期函数--监听页面卸载//清理绑定的数据和方法this.storeBindings.destroyStoreBindings()
}

绑定到组件

//组件的.js文件
import{storeBindingBehavior} from'mobx-miniprogram-bindings'//绑定方法
import{store}from'../../store/store'//实例对象映射到当前组件Compoent({behaviors:[storeBindingsBehavior],//通过storeBindingsBehavior来实现自动绑定storeBindings:{store,//指定要绑定的Storefields:{//指定要绑定的字段数据numA:()=>store.numA,//绑定字段的第一种方式numB:()=>store.numA,//绑定字段的第二种方式sum:'sum'           //绑定字段的第三种方式},actions:{//指定要绑定的方法updateNum2:"updateNum2"}},
})
http://www.lryc.cn/news/327957.html

相关文章:

  • 算法训练营第24天|回溯算法理论基础 LeetCode 77.组合
  • pip永久修改镜像地址
  • RK3588平台开发系列讲解(硬件篇-功能外设2)
  • SpringBoot学习记录
  • 财富池指标--通达信顾比均线实战指标免费源码
  • AJAX(一):初识AJAX、http协议、配置环境、发送AJAX请求、请求时的问题
  • idea常用的快捷键总结:
  • LeetCode 热题 100 题解(一):哈希部分
  • C语言 | qsort()函数使用
  • 继承的特点 | java
  • 6、jenkins项目构建类型-项目类型介绍
  • 指针函数的应用——找出哪些学生有不及格的科目
  • 【微服务】Gateway
  • 王道C语言督学营OJ课后习题(课时14)
  • Filter、Listener、AJAX
  • FastAPI+React全栈开发04 FastAPI概述
  • 基于单片机的二维码LCD显示控制设计
  • Ubuntu20.04下PCL安装,查看,卸载等操作
  • Android TargetSdkVersion 30 安装失败 resources.arsc 需要对齐且不压缩。
  • c++20中的jthread再谈
  • Fastgpt 无法启动或启动后无法正常使用的讨论(启动失败、用户未注册等问题这里)
  • Rust 实战练习 - 7. FFI, 库, ABI, libc
  • vue实现把Ox格式颜色值转换成rgb渐变颜色值(开箱即用)
  • Unity 窗口化设置
  • Android14之深入理解sp模板类(二百零二)
  • .NET core 5.0 及以上的Windows Service开发
  • Nginx配置文件解释
  • R语言赋值符号<-、=、->、<<-、->>的使用与区别
  • ffmpeg重点之时间戳,PTS、DTS、time_base
  • OpenGL 实现“人像背景虚化“效果