uniapp 页面之间传递数据

VVMFF • 2025-04-12 01:13 • 编程

在开发uniapp应用时，页面之间的数据传递是非常常见的需求。uniapp提供了很多种方式来实现页面间的数据传输，本文将会从多个角度来介绍。

一、使用app.globalData

app.globalData是uniapp中的全局变量，可以在应用的任何页面中使用，非常适合存储应用级别的数据。在一个页面中修改了app.globalData中的数据，其他页面也可以直接获取到这些数据。

const app = getApp()

// 在某个页面中修改 app.globalData 的数据
app.globalData.userInfo = {
  name: '小明',
  age: 18
}

// 在另一个页面中获取 app.globalData 的数据
const userInfo = app.globalData.userInfo

二、使用页面跳转时传递数据

在uniapp中使用uni.navigateTo或uni.redirectTo进行页面跳转时，可以通过query参数来传递数据。目标页面可以通过this.$route.query获取这些数据。

// 在当前页面进行跳转，并传递数据
uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=商品A'
})

// 在目标页面获取传递的数据
const id = this.$route.query.id
const name = this.$route.query.name

三、使用Vuex进行数据传递

Vuex是uniapp中的状态管理工具，主要用于管理组件之间的数据共享。通过在一个组件中修改Vuex中的数据，其他组件也可以直接获取到这些数据。

// 在 store.js 文件中定义 state 和 mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

// 在组件中使用Vuex的数据和方法
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'

  export default {
    computed: {
      ...mapState([
        'count'
      ])
    },
    methods: {
      ...mapMutations([
        'increment'
      ])
    }
  }
</script>

四、使用事件总线进行数据传递

在uniapp中，使用Vue实例作为事件总线可以方便地进行页面间的数据传递。通过在发送方组件中触发事件，接收方组件通过监听事件来获取数据。

// 在发送方组件中触发事件，并传递数据
this.$emit('my-event', 'event data')

// 在接收方组件中监听事件，并获取传递的数据
this.$on('my-event', data => {
  console.log(data) // event data
})

五、使用LocalStorage进行数据传递

LocalStorage是浏览器提供的本地存储方案，可以在不同的页面间共享数据。在uniapp中可以通过uni.setStorageSync和uni.getStorageSync来进行数据的存储和获取。

// 在当前页面中存储数据
uni.setStorageSync('name', '小明')

// 在其他页面中获取数据
const name = uni.getStorageSync('name')

六、使用uni-app分享时传递数据

uni-app提供了分享功能，可以通过uni-share组件来实现。在分享时也可以传递一些数据，目标页面可以通过options参数来获取这些数据。

// 在分享时传递数据
uni.share({
  title: '分享标题',
  desc: '分享描述',
  path: '/pages/index/index?id=123'
})

// 在目标页面中获取传递的数据
const id = options.query.id

七、使用uni.$emit进行数据传递

uni.$emit是uniapp中的事件系统，可以实现不同页面之间的数据通信。通过在发送方组件中触发事件，接收方组件通过在实例上监听事件来获取数据。

// 在发送方组件中触发事件，并传递数据
uni.$emit('my-event', 'event data')

// 在接收方组件中监听事件，并获取传递的数据
uni.$on('my-event', data => {
  console.log(data) // event data
})

结语

本文主要介绍了uniapp中页面之间的数据传递方法，包括app.globalData、页面跳转、Vuex、事件总线、LocalStorage、uni-app分享、uni.$emit等。开发者可以根据自己的需求来选择合适的方式。

原创文章，作者：VVMFF，如若转载，请注明出处：https://www.506064.com/n/368362.html