Heim >Web-Frontend >View.js >Es gibt mehrere Möglichkeiten, den Cache von Vue zu implementieren

Es gibt mehrere Möglichkeiten, den Cache von Vue zu implementieren

青灯夜游
青灯夜游Original
2021-12-22 18:00:1318550Durchsuche

Vue bietet 4 Möglichkeiten, Daten zwischenzuspeichern: 1. Verwenden Sie localStorage, die Syntax ist „localStorage.setItem(key, value)“ 2. Verwenden Sie sessionStorage, die Syntax ist „sessionStorage.setItem(key, value)“; Installieren und referenzieren Sie das Speicher-.js-Plug-in. Verwenden Sie dieses Plug-in zum Caching. 4. Verwenden Sie vuex, einen Statusverwaltungsmodus, der speziell für Vue.js-Anwendungen entwickelt wurde.

Es gibt mehrere Möglichkeiten, den Cache von Vue zu implementieren

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Mehrere Möglichkeiten, Caching in VU zu implementieren:

Die ersten beiden

* localStorage

  window.localStorage.setItem(key,value)
  window.localStorage.getItem(key)

* sessionStorage

 window.sessionStorage.setItem(key,value)
  window.sessionStorage.getItem(key)

Der Unterschied zwischen localStorage und sessionStorage

https://blog.csd n .net /qq_31741481/article/details/88054069

Der dritte (empfohlene) - storage.js

Verwendung:

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)
})

Der Test zeigt, dass er standardmäßig in localStorage gespeichert ist

store.js enthält verschiedene Speicherlösungen Lösung Beispielsweise kann in einigen Szenarien, in denen localStorage fehlschlägt, cookieStorage.js verwendet werden. Wenn Sie es beherrschen, können Sie praktisch alle Caching-Lösungen auf einmal nutzen.

  • all.js Alle Speicher an einem praktischen Ort.
  • localStorage.js Werte in localStorage speichern. .js
  • Werte in Cookies speichern.
  • memoryStorage .js
  • Werte im Speicher speichern.
  • oldIE-userDataStorage.js
  • Werte in userData speichern.
  • Für weitere Einführung bitte Weitere Informationen finden Sie im offiziellen Store.js (https://github.com /marcuswestin/store.js#readme)
  • Der vierte Typ - vuex eignet sich zum Erstellen komplexerer Vue-Einzelseitenanwendungen.
  • Vuex ist ein Zustandsverwaltungsmuster, das speziell für Vue.js-Anwendungen entwickelt wurde. Es verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten, und stellt mithilfe entsprechender Regeln sicher, dass sich der Status auf vorhersehbare Weise ändert. Vuex ist auch in die offizielle Debugging-Tool-Erweiterung Devtools von Vue integriert und bietet erweiterte Debugging-Funktionen wie konfigurationsfreies Time-Travel-Debugging, Status-Snapshot-Import und -Export usw. 【Verwandte Empfehlung: „
  • vue.js Tutorial
“】

Das obige ist der detaillierte Inhalt vonEs gibt mehrere Möglichkeiten, den Cache von Vue zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn