在taro开发小程序中，创建全局事件，更新各个tabbar页面数据，适用购物车更新，taro购物车数据同步

灿宝宝lo2024-03-19 22:28

在 Taro 小程序开发中实现一个全局的订阅发布机制，可以让你在任何一个 TabBar 页面修改数据时，通知其他 TabBar 页面更新数据。这种机制可以通过自定义事件的方式来实现

步骤 1：创建全局事件管理器

首先，在你的小程序中创建一个全局的事件管理器（EventBus），用于管理不同页面间的订阅和发布事件。

复制代码

// event-bus.js
class EventBus {
  constructor() {
    this.events = {};
  }

  // 订阅事件
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  // 取消订阅
  off(event, callback) {
    if (!this.events[event]) return;
    const index = this.events[event].indexOf(callback);
    if (index > -1) {
      this.events[event].splice(index, 1);
    }
  }

  // 发布事件
  emit(event, data) {
    if (!this.events[event]) return;
    this.events[event].forEach(callback => callback(data));
  }
}

// 创建一个全局的EventBus实例
const eventBus = new EventBus();
export default eventBus;

步骤 2：在 TabBar 页面订阅和发布事件

在需要互相通知的 TabBar 页面中，导入全局的事件管理器，并在页面加载时订阅事件，在适当的时机发布事件。

页面 A - 发布事件

复制代码

import Taro from '@tarojs/taro';
import eventBus from './event-bus';

class PageA extends Taro.Component {
  updateData() {
    // 更新数据的逻辑
    const newData = { /* 新数据 */ };

    // 发布事件，通知其他页面数据已更新
    eventBus.emit('dataUpdated', newData);
  }
}

页面 B - 订阅事件

复制代码

import Taro from '@tarojs/taro';
import eventBus from './event-bus';

class PageB extends Taro.Component {
  componentDidMount() {
    // 订阅事件，当数据更新时接收新数据并处理
    eventBus.on('dataUpdated', this.handleDataUpdate);
  }

  componentWillUnmount() {
    // 页面卸载时取消订阅，避免内存泄露
    eventBus.off('dataUpdated', this.handleDataUpdate);
  }

  handleDataUpdate = (newData) => {
    // 使用新数据更新页面
  };
}

通过这种方式，可以在任何一个 TabBar 页面修改数据时，通过全局事件管理器通知其他 TabBar 页面进行数据更新