1. 在 app.js 定义全局数据

// app.js
App({// 定义全局数据data: {num: 1,}
})

2. 下载消息订阅与发布

在 app.js 以及在需要用到 app.js 数据的地方引入该包

npm i pubsub-js

3. 页面结构

父组件 index.html

<!--index.wxml--><view class="container">页面组件
<!-- app.data.num 是 app.js 全局属性 --><view>全局的num：{{app.data.num}}</view><!-- 点击事件 --><button bindtap="add">num++</button><view>-------分割线---------</view><!-- A是子组件 --><A/></view>

子组件 A.wxml

<!--commponent/A/A.wxml--><!-- app.data.num 是 app.js 全局属性 -->
<view>我是组件A，全局num：{{app.data.num}}</view>

4. 实现状态管理器

在 index.js 和 A.js 以及 app.js 引入 pubsub-js

import PubSub from 'pubsub-js'

在 app.js 里的 onLaunch 生命周期订阅一个 num 增加事件

// 生命周期：初始化完成
onLaunch () {// 接收PubSub.subscribe('add', (_, data) => {// 接收数据console.log('app.js收到的数据',data);// 修改逻辑层数据this.data.num++// 因为 app.js 不能直接更新视图层，只能让对应的组件自己修改视图层PubSub.publish('success','我是app')})
},

在 index.js 发布一个 num 增加事件，并订阅一个更新视图层事件

在 bindtap 事件发布增加事件，在生命周期 onLoad 订阅一个更新视图层事件

// index.jsimport PubSub from 'pubsub-js'// 获取 app.js 的全局数据
const app = getApp()Page({data: {// 视图层的数据只有放在 data 里才能显示app,// 存放该订阅的 id ，用来取消订阅successId:''},// 在这里写订阅事件onLoad(){// 先更新视图层数据，防止页面跳转后视图层没有同步更新this.setData({app})// 再订阅一个更新视图层事件this.data.successId = PubSub.subscribe('success', (_, data) => {console.log(data);// 更新视图层this.setData({app})})},// bindtap 事件add(){// 发布一个 num 增加事件PubSub.publish('add','我是index')},})

在 A.js 订阅一个更新视图层事件

在 attached 生命周期订阅事件

// commponent/A/A.js
import PubSub from 'pubsub-js'// 获取 app.js 的全局数据
const app = getApp()Component({data: {// 视图层的数据只有放在 data 里才能显示app,// 存放该订阅的 id ，用来取消订阅successId:''},// 组件实例的生命周期lifetimes: {// 在组件实例进入页面节点树时执行attached() {// 订阅一个视图更新事件this.data.successId = PubSub.subscribe('success', (_, data) => {console.log(data);// 更新视图层this.setData({ app })})},},
})

5. 取消订阅

取消订阅分为：取消指定订阅和取消全部订阅

取消 index.js 的订阅

在卸载的生命周期取消订阅

page({// 页面卸载时触发onUnload(){// 这是取消全部订阅PubSub.clearAllSubscriptions()// 取消指定订阅// Pubsub.unsubscribe(this.data.successId)}});

取消 A.js 的订阅

在生命周期 detached 取消订阅

Component({// 组件实例的生命周期lifetimes: {// 在组件实例被从页面节点树移除时执行detached() {// 这是取消全部订阅PubSub.clearAllSubscriptions()// 取消指定订阅// Pubsub.unsubscribe(this.data.successId)},
})

打造微信小程序伪状态管理器相关推荐

微信小程序----全局状态管理 (便于全局埋点等操作)
说明由于我是一个有着一颗玻璃心的博主,导致在2018年后博客很少更新.原因是由于我的分享并没有解决到部分人的问题,而导致被骂了.当时这颗玻璃心就碎了,所以这两年以来很是消极,博客很少更新.这里给那些 ...
微信小程序全局状态管理store
wxMiniStore 一个基于原生小程序的Mini全局状态管理库,跨页面/组件的数据共享. 1.安装 npm init npm install wxministore -S 2.微信开发者工具中勾选 ...
微信小程序项目实例——密码管理器
今日推荐
微信小程序实现音乐播放器（2）
文章目录前情提要 BackgroundAudioManager API:wx.setNavigationBarTitle() 搭建静态资源服务器小程序项目 app.json app.wxss pa ...
微信小程序实现音乐播放器（5）
文章目录前情提要 pubsubjs实现页面通信 moment.js实现时间格式化 BackgroundAudioManager 小程序项目 app.json app.wxss app.js page ...
小程序全局状态管理，在页面中获取globalData和使用globalSetData
GitHub: https://github.com/WozHuang/mp-extend 主要目标微信小程序官方没有提供类似vuex.redux全局状态管理的解决方案,但是在一个完整的项目中各组件 ...
微信小程序实现一个文件管理器
微信小程序实现一个文件管理器虽然标题说是实现一个文件管理器,但我是用来管理预加载小程序可能用的网络资源的,尤其是要是用音效资源时. 小程序的包体即便是分包也是每个分包的资源大小是2m,像音频资源,使 ...
html5音乐播放器设计论文,基于微信小程序的音乐播放器设计和毕业论文
摘要随着通信技术的发展和智能设备的普及,移动互联网在近两年发展迅猛,新兴的移动社交软件"微信"逐渐走进了手机用户的生活,深受全国数亿用户的欢迎.随着微信版本的不断更新,微信也 ...
基于微信小程序的相关管理系统设计与实现开题报告的思路及方法
今天主要谈一下计算机科学相关专业同学的选题的思路及方法. 毕业设计选题选没选好就像各位走出校园踏进社会的一道坎,跨过这道坎是很关键的,而有些同学却犯了难,把本应该简单的问题复杂化了.为什么这样讲呢?之 ...

打造微信小程序伪状态管理器