Comment résoudre le problème de la perte de données lors de l'utilisation de vuex pour la gestion globale de l'état dans le projet?

Référence: La solution pour la perte de données d'état de vuex après l'actualisation de la page Web de l'application de page unique vue

1. Cause

ans: Le stockage d'état de Vuex est réactif. Lorsqu'un composant Vue lit l'état du magasin, si l'état du magasin change, le composant correspondant sera mis à jour en conséquence. Mais il y a un problème: les données stockées de vuex sont équivalentes aux variables globales que nous avons définies. Après rafraîchissement, les données à l'intérieur seront restaurées à leur état initial. Les données du magasin sont stockées dans la mémoire en cours d'exécution. Lorsque la page est actualisée, la page recharge l'instance de vue et les données du magasin sont réaffectées.

2. Solutions

ans: pour enregistrer l'état des données dans un stockage local: localStorage sessionStorage cookiedans

3. Processus de résolution

1. Choisissez le bon stockage client

   • localStorage : Stocké localement de manière permanente, sauf si activement supprimé
   • sessionStorage: Est stocké jusqu'à ce que la page actuelle soit fermée
   • cookie: L'heure de validité que vous définissez pour stocker, mais l'inconvénient n'est pas facile de lire les données et de stocker une grande
     sélection sessionStorageau motif que:
   • Vue est une application à page unique, et les opérations sont toutes dans un itinéraire de saut de page
   • sessionStorageIl peut être garanti que sessionStorageles données sont vides lorsque la page est ouverte . Si tel est le cas localStorage, les données de la dernière page ouverte seront lues

2. Comment sessionStoragestocker des données dans l'état

   • Solution irréalisable: comme stateles données qu'il sessionStoragecontient sont réactives, le stockage doit suivre les changements. Et comme vuex stipule que toutes les statedonnées des données doivent mutationêtre modifiées par des méthodes, la première solution est de mutationmodifier stateles sessionStorageattributs stockés correspondants lors de la modification . Mais si vous souhaitez faire cela, il est préférable de l'utiliser directement sessionStoragepour la gestion de l'état
   • Solution faisable : lorsque vous cliquez sur l'actualisation de la page, stateenregistrez d'abord les données sessionStorage, puis actualisez la page. En window.addEventListener("beforeunload",()=>{ })surveillant l'actualisation de la page, beforeunloadcet événement est déclenché en premier lorsque la page est actualisée. Dans app.vuel'écouteur d'événements beforeunload, vous pouvez vous assurer que chaque actualisation de page peut être déclenchée.

export default {
  name: 'App',
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}