uniapp 广播数据

使用全局事件总线进行广播

在uniapp中，可以通过全局事件总线实现组件间的数据广播。创建一个Vue实例作为事件中心，用于触发和监听事件。

// 在main.js中创建事件总线
Vue.prototype.$EventBus = new Vue()

// 发送广播的组件
this.$EventBus.$emit('eventName', data)

// 接收广播的组件
this.$EventBus.$on('eventName', (data) => {
  console.log('接收到的数据:', data)
})

使用uni.$emit和uni.$on方法

uniapp提供了内置的全局事件方法，可以在任意页面间进行通信。

// 发送广播的页面
uni.$emit('updateData', {msg: '数据更新'})

// 接收广播的页面
uni.$on('updateData', (data) => {
  console.log('收到数据:', data)
})

通过Vuex状态管理共享数据

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

// store/index.js中定义状态和mutations
export default new Vuex.Store({
  state: {
    sharedData: null
  },
  mutations: {
    setSharedData(state, payload) {
      state.sharedData = payload
    }
  }
})

// 组件中提交mutation
this.$store.commit('setSharedData', {key: 'value'})

// 其他组件获取数据
computed: {
  sharedData() {
    return this.$store.state.sharedData
  }
}

使用uni.setStorageSync和uni.onStorageChange

通过本地存储配合存储变化监听实现数据广播。

// 设置存储触发广播
uni.setStorageSync('broadcastData', {info: '新数据'})

// 监听存储变化
uni.onStorageChange((res) => {
  console.log('存储变化:', res)
})

注意事项

全局事件需要手动移除监听，避免内存泄漏。在页面卸载时应该调用uni.$off方法。

onUnload() {
  uni.$off('updateData')
}

Vuex适合管理需要持久化的共享状态，而事件总线更适合一次性或临时的数据通信。根据实际场景选择合适的方法，对于简单的数据广播，uni.$emit和uni.$on是最便捷的选择。