Bagaimana untuk memperkenalkan Vue melalui CDN dan merealisasikan pemindahan nilai pada halaman yang berbeza

Dalam pembangunan web, populariti rangka kerja berasaskan komponen membolehkan kami membangunkan halaman hadapan dengan lebih cekap dan menyelenggara dan mengurus kod dengan lebih baik. Sebagai salah satu yang terbaik, Vue telah digunakan oleh lebih ramai pembangun bahagian hadapan. Apabila menggunakan Vue, biasanya perlu untuk memindahkan data antara halaman yang berbeza Artikel ini akan memperkenalkan cara memperkenalkan Vue melalui CDN dan merealisasikan pemindahan data antara halaman yang berbeza.

1. Melepasi nilai antara halaman yang berbeza

Dalam pembangunan rangka kerja Vue, kita sering perlu memindahkan data antara halaman yang berbeza Sebagai contoh: kami mengisi maklumat tertentu di halaman 1 , perlu menggunakan data ini di halaman 2. Ini memerlukan pelaksanaan pemindahan data merentas halaman dalam Vue.

Dalam proses pemindahan data, kami boleh menggunakan Vuex, localStorage, sessionStorage, dll. Walau bagaimanapun, apabila menggunakan CDN, Vuex perlu memuat turun fail perpustakaan yang berkaitan dan localStorage dan sessionStorage hanya menyokong storan jenis rentetan. Dan apabila kami menggunakan localStorage atau sessionStorage, kami perlu mensiri dan menyahsiri data, yang bukan sahaja menyusahkan, tetapi juga mengurangkan prestasi. Oleh itu, artikel ini akan memperkenalkan kaedah yang tidak memerlukan muat turun fail perpustakaan lain dan boleh menyimpan pelbagai jenis data.

2. Gunakan objek tetingkap

Apabila CDN memperkenalkan Vue, kami boleh menggunakan objek tetingkap untuk memindahkan data antara halaman yang berbeza. Dalam rangka kerja Vue, kita boleh mentakrifkan pembolehubah global melalui objek prototaip Vue:

Vue.prototype.$global = {}

Seperti yang ditunjukkan dalam kod di atas, dalam objek prototaip Vue Pembolehubah $global ditakrifkan. Pembolehubah ini boleh digunakan dalam mana-mana komponen, dan nilai pembolehubah ini akan kekal dalam ingatan sehingga penyemak imbas ditutup.

Seterusnya, kita boleh mengakses pembolehubah ini melalui objek tetingkap dan memberikan nilai kepadanya:

tetingkap.$global = { count: 0 }

Menggunakan kod di atas , kami Pembolehubah global bernama $global ditakrifkan pada objek tetingkap dan memberikan nilai {count: 0}.

Apabila kita perlu menghantar pembolehubah ini dalam halaman yang berbeza, kita boleh mendapatkan dan mengubah suai nilainya melalui objek tetingkap. Sebagai contoh, kami menambah 1 pada nilai pembolehubah dalam komponen pada halaman 1 dan memberikan nilai pembolehubah ini kepada komponen pada halaman 2.

//Halaman 1
Vue.component('component1', {
template: <button @click="addCount">{{ count }}</button>,
data() {

return {
  count: window.$global.count
}

},
kaedah: {

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

}
})

//Halaman 2
Vue.component('component2', {
templat: <span>{{ count }}</span> ,
data() {

return {
  count: window.$global.count
}

}
})

Dalam kod di atas, kami menetapkan pembolehubah $global dalam objek tetingkap dalam komponen halaman 1 Nilai kiraan dinaikkan sebanyak 1, dan nilai kiraan diperoleh dalam komponen lain halaman 2.

Ringkasan

Di atas ialah cara untuk memindahkan data antara halaman yang berbeza apabila menggunakan CDN untuk memperkenalkan rangka kerja Vue. Dengan mentakrifkan pembolehubah global dalam ingatan melalui objek tetingkap, dan mengakses serta mengubah suai pembolehubah ini, pemindahan data antara berbilang halaman boleh dicapai. Kaedah ini tidak memerlukan muat turun fail perpustakaan lain, tidak memerlukan pensirilan dan penyahsirilan data, dan menyokong penyimpanan pelbagai jenis data. Sudah tentu, kaedah ini juga mempunyai beberapa kelemahan Contohnya, ia tidak sesuai untuk data yang perlu dikemas kini dengan kerap, kerana setiap halaman perlu membaca semula nilai pembolehubah, yang boleh menyebabkan masalah prestasi.

Akhir sekali, adalah penting untuk ambil perhatian bahawa memandangkan data disimpan dalam ingatan, ia akan hilang selepas penyemak imbas ditutup. Jika anda perlu menyimpan data secara berterusan, sila gunakan localStorage atau sessionStorage untuk mencapai ini.

Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan Vue melalui CDN dan merealisasikan pemindahan nilai pada halaman yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!