Le projet Vue enregistre sans recharger

Vue.js est un framework front-end populaire qui aide les développeurs à créer plus efficacement des applications Web interactives. Lors du développement de projets à l'aide de Vue.js, nous rencontrons souvent des situations dans lesquelles nous devons sauvegarder l'état mais ne souhaitons pas le recharger. Cet article présentera quelques solutions pour atteindre cet objectif.

1. Utiliser le stockage local du navigateur

Le stockage local du navigateur fait référence au stockage des données dans le navigateur local du client afin que les données puissent être conservées lorsque la page est actualisée ou rechargée. HTML5 fournit deux fonctions : localStorage et sessionStorage. Ils peuvent stocker des données dans le navigateur local et avoir les caractéristiques suivantes :

1. localStorage Les données stockées n'ont pas de délai d'expiration à moins que le client ne les efface manuellement.
2. Les données stockées dans sessionStorage sont effacées à la fin de la session, c'est-à-dire lorsque la fenêtre ou l'onglet du navigateur est fermé, les données stockées sont également effacées.

Utilisez la méthode localStorage dans le projet Vue.js :

1. Obtenir des données :

var data = localStorage.getItem('key');

2. Données de stockage :

localStorage.setItem('key', data);

3. Supprimer des données :

localStorage.removeItem('key');

2. Utilisez Vuex

Vuex est fait pour Modèle de gestion d'état pour les applications Vue.js. Il gère de manière centralisée l'état de tous les composants d'une application et fournit des outils et des règles pour garantir que les mises à jour d'état sont cohérentes et prévisibles. En utilisant Vuex, vous pouvez stocker les données dans un état global afin qu'elles puissent être consultées et mises à jour dans toute votre application. Pour atteindre cet objectif dans un projet Vue.js, vous pouvez utiliser les étapes suivantes :

1. Créez un fichier store.js :

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    data: null
  },
  
  mutations: {
    setData (state, payload) {
      state.data = payload;
    }
  },
  
  actions: {
    setData ({commit}, payload) {
      commit('setData', payload);
    }
  });

2. Déclenchez la méthode setData() dans le composant qui doit enregistrer l'état :

this.$store.dispatch('setData', data);

3. En cas de besoin Dans le composant qui accède à l'état enregistré, utilisez la méthode calculée pour obtenir les données stockées :

computed: {
  userData () {
    return this.$store.state.data;
  }
}

3. Utilisation de cookies

Le cookie est un autre moyen couramment utilisé pour enregistrer l'état côté client. Les cookies sont généralement utilisés pour stocker les informations d'authentification et d'autres préférences d'un utilisateur. Dans le projet Vue.js, l'utilisation de cookies pour stocker des données peut être réalisée en suivant les étapes suivantes :

1. Utilisez la bibliothèque js-cookie dans le projet Vue.js :

npm install js-cookie --save

2. Définissez les cookies dans les composants qui doivent enregistrer l'état :

import Cookies from 'js-cookie';

Cookies.set('data', data);

3. State est accessible à partir de n'importe quel autre composant :

import Cookies from 'js-cookie';

var data = Cookies.get('data');

4 Utilisation d'IndexedDB

IndexedDB est une base de données native fournie par le navigateur et peut stocker des données structurées dans le navigateur. Dans le projet Vue.js, l'utilisation d'IndexedDB peut être réalisée en suivant les étapes suivantes :

1. Créez une base de données IndexedDB nommée myDatabase :

var request = window.indexedDB.open('myDatabase', 1);

request.onerror = function (event) {
  console.log("数据库打开失败");
};

request.onsuccess = function (event) {
  console.log("数据库打开成功!");
};

2. Dans le composant qui doit enregistrer l'état, stockez les données dans la base de données :

var request = window.indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.log("数据库打开失败");
};

request.onsuccess = function(event) {
  var db = request.result;
  var transaction = db.transaction(['data'], 'readwrite');
      
  var objectStore = transaction.objectStore('data');
  var request = objectStore.put(data, 'key');
      
  request.onerror = function(event) {
    console.log("数据写入失败");
  };
      
  request.onsuccess = function(event) {
    console.log("数据写入成功");
  };
};

3. Dans les composants qui doivent accéder à l'état enregistré, récupérez les données enregistrées dans la base de données :

var request = window.indexedDB.open('myDatabase', 1);

request.onerror = function(event) {
  console.log("数据库打开失败");
  };

request.onsuccess = function(event) {
  var db = request.result;
  var transaction = db.transaction(['data'], 'readonly');
      
  var objectStore = transaction.objectStore('data');
  var request = objectStore.get('key');
      
  request.onerror = function(event) {
    console.log("数据读取失败");
  };
      
  request.onsuccess = function(event) {
    console.log(request.result);
  };
}

Résumé :

Voici quelques méthodes pour résoudre le problème de la sauvegarde de l'état sans rechargement. méthode appropriée pour mettre en œuvre les besoins du projet. Qu'il s'agisse d'utiliser le stockage local du navigateur, Vuex, les cookies ou IndexedDB, toutes sont de bonnes solutions. Cependant, il est important de noter que dans certains cas, ces méthodes peuvent ne pas convenir à un environnement d'application spécifique. Par conséquent, il est préférable d’évaluer différentes méthodes et de choisir la méthode la plus appropriée pour sauvegarder l’état sans rechargement.

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!