CDN を介して Vue を導入し、異なるページでの値の転送を実現する方法

Web 開発では、コンポーネントベースのフレームワークが普及しているため、フロントエンド ページをより効率的に開発し、コードの保守と管理をより適切に行うことができます。 Vue は最高のものの 1 つとして、ますます多くのフロントエンド開発者によって使用されています。 Vueを利用する場合、通常は異なるページ間でのデータの受け渡しが必要になりますが、本記事ではCDNを介してVueを導入し、異なるページ間のデータ受け渡しを実現する方法を紹介します。

1. 異なるページ間での値の転送

Vue フレームワークの開発では、異なるページ間でデータを転送する必要があることがよくあります。例: ページ 1 に特定の情報を入力します。 、これらのデータをページ 2 で使用する必要があります。これには、Vue でページ間のデータ転送を実装する必要があります。

データ転送のプロセスでは、Vuex、localStorage、sessionStorage などを使用できます。ただし、CDN を使用する場合、Vuex は関連するライブラリ ファイルをダウンロードする必要があり、localStorage と sessionStorage は文字列型のストレージのみをサポートします。また、localStorage または sessionStorage を使用する場合は、データをシリアル化および逆シリアル化する必要がありますが、これは面倒なだけでなく、パフォーマンスも低下します。そこで、この記事では、他のライブラリファイルをダウンロードする必要がなく、さまざまな種類のデータを保存できる方法を紹介します。

2. ウィンドウ オブジェクトを使用する

CDN が Vue を導入すると、ウィンドウ オブジェクトを使用して異なるページ間でデータを転送できます。 Vue フレームワークでは、Vue プロトタイプ オブジェクトを通じてグローバル変数を定義できます。

Vue.prototype.$global = {}

上記のコードに示すように、Vue プロトタイプ オブジェクト内で$global 変数が定義されています。この変数はどのコンポーネントでも使用でき、この変数の値はブラウザを閉じるまでメモリ内に残ります。

次に、window オブジェクトを通じてこの変数にアクセスし、値を代入します。

window.$global = { count: 0 }

上記のコードを使用します。 $global という名前のグローバル変数がウィンドウ オブジェクトで定義され、値 {count: 0} が割り当てられます。

この変数を別のページに渡す必要がある場合は、ウィンドウ オブジェクトを通じてその値を取得および変更できます。たとえば、1 ページ目のコンポーネントの変数値に 1 を加算し、この変数値を 2 ページ目のコンポーネントに渡します。

//ページ 1
Vue.component('component1', {
テンプレート: <button>{{ count }}</button>&gt ;,
data() {

return {
  count: window.$global.count
}

},
メソッド: {

addCount() {
  window.$global.count++
}

}
})

//ページ 2
Vue.component('component2', {
template: <span>{{ count }}</span>,
data() {

return {
  count: window.$global.count
}

}
})

上記のコードでは、ページ 1 のコンポーネントの window オブジェクトとページ 2 の別のコンポーネントの $global 変数のカウント値に 1 を加算します。カウントの値。

概要

上記は、CDN を使用して Vue フレームワークを導入する場合に、異なるページ間でデータを転送する方法です。ウィンドウ オブジェクトを通じてメモリ内にグローバル変数を定義し、この変数にアクセスして変更することにより、複数のページ間のデータ転送を実現できます。この方法では、他のライブラリ ファイルをダウンロードする必要がなく、データのシリアル化と逆シリアル化も必要なく、さまざまなデータ型の保存がサポートされます。もちろん、この方法にはいくつかの欠点もあります。たとえば、各ページで変数の値を再読み取りする必要があり、パフォーマンスの問題が発生する可能性があるため、頻繁に更新する必要があるデータには適していません。

最後に、データはメモリに保存されるため、ブラウザを閉じると失われることに注意することが重要です。データを永続的に保存する必要がある場合は、localStorage または sessionStorage を使用してこれを実現してください。

以上がCDN を介して Vue を導入し、異なるページでの値の転送を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。