uniapp がページ間でデータを受け渡す方法を実装する方法

Uniapp はページ間でデータを転送する方法を実装しており、特定のコード例が必要です

Uniapp 開発では、ページ間でのデータ転送は非常に一般的な要件です。合理的なデータ転送により、ページジャンプ時のデータ共有とインタラクションを実現できます。この記事では、uniapp でページ間のデータ転送を実装する方法と具体的なコード例を紹介します。

1. URL パラメーターを使用してデータを渡す

URL パラメーターを使用して保留中のデータを渡すのが、最も一般的で簡単な方法です。ジャンプリンクのURLにパラメータを追加することで、ページ間のデータ転送が可能になります。以下はサンプル コードです。

// ページ A

<text>{{param}}</text>
<button @click="navigateToPageB">跳转至页面B</button>

<script><br>デフォルトのエクスポート {<br> data() {</script>

return {
  param: 'Hello Uniapp'
}

},
メソッド: {

navigateToPageB() {
  uni.navigateTo({
    url: '/pages/pageB?pageParam=' + this.param
  })
}

}
}

// ページ B

<text>{{pageParam}}</text>

> ;

<script><br>デフォルトのエクスポート {<br> data() {</script>

return {
  pageParam: ''
}

},
onLoad(options) {

this.pageParam = options.pageParam

}
}

ページ A では、ボタン クリック イベントを通じてページ B にジャンプし、パラメータ pageParam を渡します。ページ B では、渡されたパラメーターが onLoad ライフサイクル関数を通じて取得され、pageParam に割り当てられ、ページに表示されます。

2. Vuex グローバル状態管理を使用する

複数のページ間でデータを共有する必要がある場合は、Vuex を使用することをお勧めします。 Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンであり、uniapp でも使用できます。サンプルコードは次のとおりです:

//store/index.js
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

デフォルトの新しい Vuex.Store をエクスポート({
状態: {

data: 'Hello Uniapp'

},
変異: {

updateData(state, payload) {
  state.data = payload
}

},
アクション: {} ,
ゲッター: {}
})

// ページ A

<text>{{data}}</text>
<button @click="navigateToPageB">跳转至页面B</button>

<script><br>import { mapState } from 'vuex'</script>

export デフォルト {
計算結果: {

...mapState(['data'])

} ,
メソッド: {

navigateToPageB() {
  this.$store.commit('updateData', 'Hello Page B')
  uni.navigateTo({
    url: '/pages/pageB'
  })
}

}
}

// ページ B

<text>{{data}}</text>

<script><br>import { mapState } from 'vuex'</script>

export default {
計算結果: {

...mapState(['data'])

}
}

この例では、ページ A で mapState を使用します。関数は、store の data を現在のコンポーネントの data 計算プロパティにマップします。ページ A のクリック イベントで、commit メソッドを使用して store の data データを変更し、そのページにジャンプします。ページ B も、mapState 補助関数を使用して、store の data を現在のコンポーネントにマップします。

概要:

上記の 2 つの方法は、uniapp がページ間でデータを転送するための一般的な方法です。 URL パラメーターを介したデータ転送はシンプルかつ明確であり、データ量が少ない状況に適していますが、Vuex の使用は複数のページ間でデータを共有する必要がある状況に適しています。実際のニーズに基づいてページ間でデータを転送する適切な方法を選択すると、開発効率とユーザー エクスペリエンスが向上します。

以上がuniapp がページ間でデータを受け渡す方法を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。