Terdapat beberapa cara untuk melaksanakan cache vue
Vue mempunyai 4 cara untuk cache data: 1. Menggunakan localStorage, sintaks "localStorage.setItem(key, value)"; 2. Menggunakan sessionStorage, sintaks "sessionStorage.setItem(key, value)"; 3. Pasang dan rujuk pemalam storage.js, dan gunakan pemalam untuk caching; 4. Gunakan vuex, iaitu mod pengurusan keadaan yang dibangunkan khas untuk aplikasi Vue.js.
Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.
Beberapa cara untuk melaksanakan caching dalam vu:
Dua yang pertama
* localStorage
window.localStorage.setItem(key,value) window.localStorage.getItem(key)
* sessionStorage
window.sessionStorage.setItem(key,value) window.sessionStorage.getItem(key)
Perbezaan antara localStorage dan sessionStorage
https://blog.csdn.net/qq_31741481/article/details/ 88054069
Kaedah ketiga (disyorkan) - storage.js
Penggunaan:
import storage from 'store' // Store current user store.set('user', { name:'Marcus' }) // Get current user store.get('user') // Remove current user store.remove('user') // Clear all keys store.clearAll() // Loop over all stored values store.each(function(value, key) { console.log(key, '==', value) })
Diuji, lalai disimpan dalam localStorage
store.js mengandungi pelbagai penyelesaian storan Contohnya, dalam beberapa senario di mana localStorage gagal, cookieStorage.js boleh digunakan. Kuasai dan anda pada dasarnya boleh menangkap semua penyelesaian caching sekali gus.
- all.js Semua storan di satu tempat yang berguna.
- localStorage.js Simpan nilai dalam localStorage Bagus untuk semua pelayar moden.
- sessionStorage.js Simpan nilai dalam sessionStorage.
- cookieStorage.js Simpan nilai dalam kuki Mod Safari Private.
- memoryStorage.js Simpan nilai dalam memori sandaran hebat untuk memastikan kefungsian kedai pada setiap masa.
- oldFF-globalStorage.js. Simpan nilai dalam GlobalStorage Hanya berguna untuk Firefox 3 yang lama.
- oldIE-userDataStorage.js Simpan nilai dalam userData Hanya berguna untuk IE 6 yang lama.
Untuk pengenalan lanjut, sila rujuk kepada :store.js rasmi(https://github.com/marcuswestin/store.js#readme)
Jenis keempat - vuex
sesuai untuk membina aplikasi satu halaman vue yang lebih kompleks.
Vuex ialah corak pengurusan keadaan yang dibangunkan khusus untuk aplikasi Vue.js. Ia menggunakan storan terpusat untuk mengurus status semua komponen aplikasi dan menggunakan peraturan yang sepadan untuk memastikan status berubah dengan cara yang boleh diramal. Vuex juga disepadukan ke dalam sambungan devtools alat penyahpepijatan rasmi Vue, menyediakan fungsi penyahpepijatan lanjutan seperti penyahpepijatan perjalanan masa konfigurasi sifar, import dan eksport syot kilat status, dsb.
[Cadangan berkaitan: "tutorial vue.js"]
Atas ialah kandungan terperinci Terdapat beberapa cara untuk melaksanakan cache vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.

Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.

Terdapat tiga cara untuk merujuk kepada fail JS dalam vue.js: Secara langsung tentukan jalan menggunakan & lt; skrip & gt; tag ;; import dinamik menggunakan cangkuk kitaran hayat yang dipasang (); dan mengimport melalui Perpustakaan Pengurusan Negeri VUEX.

Pilihan Watch di Vue.js membolehkan pemaju mendengar perubahan dalam data tertentu. Apabila data berubah, tontonkan mencetuskan fungsi panggil balik untuk melakukan paparan kemas kini atau tugas lain. Pilihan konfigurasinya termasuk segera, yang menentukan sama ada untuk melaksanakan panggilan balik dengan serta -merta, dan mendalam, yang menentukan sama ada untuk mendengarkan secara rekursif terhadap objek atau tatasusunan.

Vue.js mempunyai empat kaedah untuk kembali ke halaman sebelumnya: $ router.go (-1) $ router.back () menggunakan & lt; router-link to = & quot;/& quot; Komponen Window.History.Back (), dan pemilihan kaedah bergantung pada tempat kejadian.

Melaksanakan kesan menatal marquee/teks di VUE, menggunakan animasi CSS atau perpustakaan pihak ketiga. Artikel ini memperkenalkan cara menggunakan animasi CSS: Buat teks tatal dan bungkus teks dengan & lt; div & gt;. Tentukan animasi CSS dan tetapkan limpahan: tersembunyi, lebar, dan animasi. Tentukan frasa key, set Transform: TranslateX () pada permulaan dan akhir animasi. Laraskan sifat animasi seperti tempoh, kelajuan tatal, dan arah.

Pagination adalah teknologi yang memisahkan set data besar ke dalam halaman kecil untuk meningkatkan prestasi dan pengalaman pengguna. Di VUE, anda boleh menggunakan kaedah terbina dalam berikut untuk paging: Kirakan jumlah halaman: TotalPages () Traversal Page Number: V-For Directive Untuk menetapkan halaman semasa: CurrentPage Dapatkan data halaman semasa: CurrentPagedata ()

Anda boleh menanyakan versi VUE dengan menggunakan Vue Devtools untuk melihat tab VUE dalam konsol penyemak imbas. Gunakan NPM untuk menjalankan arahan "NPM LIST -G VUE". Cari item VUE dalam objek "Dependencies" fail Package.json. Untuk projek Vue CLI, jalankan perintah "Vue -version". Semak maklumat versi di & lt; skrip & gt; Tag dalam fail HTML yang merujuk kepada fail VUE.
