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

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

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

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

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

// ページ A

{{param}} 跳转至页面B

// ページ B

{{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

{{data}} 跳转至页面B

// ページ B

{{data}}