uniapp 頁面之間傳遞數據

在開發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等。開發者可以根據自己的需求來選擇合適的方式。