Maison  >  Article  >  interface Web  >  Il existe plusieurs façons d'implémenter le cache de vue

Il existe plusieurs façons d'implémenter le cache de vue

青灯夜游
青灯夜游original
2021-12-22 18:00:1318435parcourir

Vue propose 4 façons de mettre les données en cache : 1. Utilisez localStorage, la syntaxe est "localStorage.setItem(key, value)" ; 2. Utilisez sessionStorage, la syntaxe est "sessionStorage.setItem(key, value)" ; Installez et référencez le plug-in de stockage .js, utilisez ce plug-in pour la mise en cache ; 4. Utilisez vuex, qui est un mode de gestion d'état spécialement développé pour les applications Vue.js.

Il existe plusieurs façons d'implémenter le cache de vue

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Plusieurs façons d'implémenter la mise en cache dans vu :

Les deux premières

* localStorage

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

* sessionStorage

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

La différence entre localStorage et sessionStorage

https://b log.csd m .net /qq_31741481/article/details/88054069

Le troisième (recommandé) - storage.js

Utilisation :

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

Le test montre qu'il est stocké dans localStorage par défaut

store.js contient diverses solutions de stockage Solution , par exemple, dans certains scénarios où localStorage échoue, cookieStorage.js peut être utilisé. Maîtrisez-le et vous pourrez pratiquement récupérer toutes les solutions de mise en cache en une seule fois.

  • all.js Tous les stockages dans un seul endroit pratique.
  • localStorage.js Stockez les valeurs dans localStorage.js
  • Stockez les valeurs dans les cookies Utile pour le mode privé de Safari.
  • memoryStorage. .js
  • Stocke les valeurs en mémoire. Utile uniquement pour l'ancien Firefox 3+.
  • oldIE-userDataStorage.js
  • Stocke les valeurs dans userData Uniquement utile pour l'ancien IE 6+.
  • Pour plus d'introduction, veuillez. reportez-vous au site officiel : store.js (https://github.com /marcuswestin/store.js#readme)
  • Le quatrième type - vuex convient à la création d'applications vue d'une seule page plus complexes.
  • Vuex est un modèle de gestion d'état développé spécifiquement pour les applications Vue.js. Il utilise un stockage centralisé pour gérer l'état de tous les composants de l'application et utilise les règles correspondantes pour garantir que l'état change de manière prévisible. Vuex est également intégré à l'extension devtools de l'outil de débogage officiel de Vue, fournissant des fonctions de débogage avancées telles que le débogage de voyage dans le temps sans configuration, l'importation et l'exportation d'instantanés d'état, etc. 【Recommandation associée : "
  • Tutoriel vue.js
"】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn