uniapp 广播数据

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

在uniapp中，可以通过全局事件总线（EventBus）实现数据的广播和监听。创建一个全局的EventBus实例，在需要的地方触发事件和监听事件。

// 在main.js中创建EventBus
import Vue from 'vue'
export const EventBus = new Vue()
Vue.prototype.$eventBus = EventBus

// 发送广播
this.$eventBus.$emit('eventName', data)

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

使用uni.$on和uni.$emit进行跨页面通信

uniapp提供了内置的全局事件监听和触发方法，可以在不同页面间进行数据传递。

// 在页面A发送广播
uni.$emit('updateData', { key: 'value' })

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

使用Vuex进行状态管理广播

对于需要全局共享的数据，可以使用Vuex进行状态管理，通过mutations和actions来更新和获取数据。

// store.js中定义
const store = new Vuex.Store({
  state: {
    sharedData: null
  },
  mutations: {
    setSharedData(state, payload) {
      state.sharedData = payload
    }
  }
})

// 组件中更新数据
this.$store.commit('setSharedData', { key: 'value' })

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

使用uni.setStorageSync和uni.onStorageChange

通过本地存储配合存储事件监听，可以实现简单的数据广播功能。

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

// 监听存储变化
uni.onStorageChange((res) => {
  if (res.key === 'broadcastData') {
    console.log('数据已更新:', res.value)
  }
})

注意事项

事件监听需要在组件销毁时手动移除，避免内存泄漏。

// 在组件销毁时移除监听
beforeDestroy() {
  uni.$off('eventName')
  this.$eventBus.$off('eventName')
}

对于频繁更新的数据，建议使用Vuex进行管理。跨页面通信时，注意页面生命周期，确保监听时页面已创建。