uniapp 广播数据

uniapp 广播数据实现方法

在 uniapp 中实现广播数据功能，可以通过以下方式完成：

使用全局事件总线 uniapp 提供了全局事件总线机制，可以通过 uni.$emit、uni.$on、uni.$once 和 uni.$off 来实现跨页面通信。

// 发送广播
uni.$emit('eventName', {data: 'value'});

// 接收广播
uni.$on('eventName', function(data) {
  console.log(data);
});

// 移除监听
uni.$off('eventName');

使用 Vuex 状态管理 对于需要共享的数据，可以使用 Vuex 进行全局状态管理。

// store.js
export default new Vuex.Store({
  state: {
    broadcastData: null
  },
  mutations: {
    setBroadcastData(state, payload) {
      state.broadcastData = payload
    }
  }
})

// 发送数据
this.$store.commit('setBroadcastData', {data: 'value'});

// 接收数据
computed: {
  broadcastData() {
    return this.$store.state.broadcastData
  }
}

使用本地存储 对于需要持久化的广播数据，可以使用 uniapp 的本地存储 API。

// 存储数据
uni.setStorage({
  key: 'broadcastData',
  data: {data: 'value'},
  success: function() {
    console.log('存储成功');
  }
});

// 获取数据
uni.getStorage({
  key: 'broadcastData',
  success: function(res) {
    console.log(res.data);
  }
});

注意事项

• 全局事件总线适合临时性数据传递，页面关闭后监听会自动移除
• Vuex 适合管理应用全局状态，但页面刷新后会丢失
• 本地存储适合需要持久化的数据，但频繁读写可能影响性能
• 跨平台开发时需注意各平台对事件机制的支持差异