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

以 app.js 的全局属性为基础，用消息订阅与发布对全局属性进行管理

 以 vuex 为例，app.js 全局属性就是 state，消息发布就是 actions ，消息订阅就是 mutations

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.js

import 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)
      },
})