Comment implémenter la mise en cache des données et le stockage local dans Vue

Comment implémenter la mise en cache des données et le stockage local dans Vue

Dans le développement de Vue, nous rencontrons souvent le besoin de mettre en cache certaines données pour améliorer les performances ou enregistrer les données sur le stockage local. Cet article expliquera comment utiliser Vue pour implémenter la mise en cache des données et le stockage local, et donnera des exemples de code spécifiques.

1. Mise en cache des données

La mise en cache des données peut réduire les requêtes réseau et améliorer l'expérience utilisateur et les performances des applications. Vue fournit un moyen pratique de mettre en cache des données, à l'aide de propriétés calculées.

Tout d'abord, définissez les attributs de données qui doivent être mis en cache dans le composant Vue :

data() {
  return {
    userList: [], // 需要缓存的数据
  };
},

Ensuite, obtenez et renvoyez les données qui doivent être mises en cache dans l'attribut calculé :

computed: {
  cachedUserList() {
    // 如果缓存中已有数据，直接返回缓存数据
    if (localStorage.getItem("userList")) {
      return JSON.parse(localStorage.getItem("userList"));
    } else {
      // 如果缓存中没有数据，发送网络请求获取数据
      // 并将数据缓存到本地存储
      axios.get("/api/userList").then((res) => {
        this.userList = res.data;
        localStorage.setItem("userList", JSON.stringify(res.data));
      });
      return this.userList;
    }
  },
},

Dans le code ci-dessus, déterminez d'abord si elles sont mises en cache les données existent déjà dans localStorage. Si oui, les données mises en cache seront renvoyées directement ; sinon, une requête réseau sera envoyée pour obtenir les données et les données obtenues seront mises en cache dans localStorage.

Utilisez cette propriété calculée dans le modèle :

<ul>
  <li v-for="user in cachedUserList" :key="user.id">{{ user.name }}</li>
</ul>

De cette façon, chaque fois que le composant est rendu, il essaiera d'abord d'obtenir les données du cache, et n'enverra la requête que s'il n'y a pas de données dans le cache.

2. Stockage local des données

Parfois, nous souhaitons enregistrer des données dans le stockage local de l'utilisateur à des fins de stockage persistant ou de partage de données entre les pages. Vue fournit l'objet localStorage pour implémenter le stockage local des données.

Il est très simple de sauvegarder des données en utilisant localStorage. Voici un exemple qui montre comment enregistrer et obtenir des données stockées localement :

// 保存数据到本地存储
localStorage.setItem("username", "John");

// 从本地存储中获取数据
const username = localStorage.getItem("username");
console.log(username); // 输出：John

Dans Vue, nous pouvons enregistrer les données qui doivent être stockées localement dans localStorage, puis les utiliser dans les propriétés calculées ou les méthodes de cycle de vie du composant.

Par exemple, définissez un attribut de données qui nécessite un stockage local dans le composant Vue :

data() {
  return {
    username: "", // 需要保存到本地存储的数据
  };
},

Ensuite, dans la méthode de cycle de vie du composant (telle que créée), récupérez les données du stockage local et affectez-les à l'attribut :

created() {
  this.username = localStorage.getItem("username");
},

À ce moment, l'attribut de nom d'utilisateur du composant sera initialisé à la valeur dans le stockage local.

Afin de répondre aux modifications apportées aux données par l'utilisateur, nous pouvons utiliser l'option watch pour écouter les changements dans l'attribut du nom d'utilisateur et mettre à jour le stockage local lorsqu'il change :

watch: {
  username(newUsername) {
    localStorage.setItem("username", newUsername);
  },
},

De cette façon, lorsque l'utilisateur modifie le nom d'utilisateur, le la valeur dans le stockage local sera modifiée en conséquence.

En résumé, Vue fournit des méthodes pratiques pour implémenter la mise en cache des données et le stockage local, qui peuvent être réalisés via des propriétés calculées et des objets localStorage. Cela améliore non seulement les performances des applications, mais permet également un stockage persistant et un partage de données entre pages. Les exemples de code ci-dessus permettent d'utiliser Vue pour implémenter la mise en cache des données et le stockage local. J'espère que cela vous sera utile.

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!