Comment empêcher l'effacement des données après l'actualisation de la page Vuex

Cette fois, je vais vous montrer comment empêcher les données d'être effacées après l'actualisation de la page vuex, et quelles sont les précautions pour empêcher les données d'être effacées après l'actualisation de la page vuex. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Raisons

2. Solution

localStorage n'a pas de limite de temps à moins qu'il ne soit supprimé, sessionLe stockage est une session, la session se termine lorsque le navigateur est fermé, a une limite de temps et a son propre Baidu

J'utilise sessionStorage ici Ce qu'il faut noter ici, c'est que la variable dans vuex est réactive. , mais sessionStorage ne l'est pas, lorsque vous modifiez l'état dans vuex, le composant détectera le changement, mais sessionStorage ne le fera pas. La page doit être actualisée pour voir le changement, donc l'état dans vuex doit être obtenu à partir de sessionStorage, afin que le Le composant peut être réactif Modifications

3. Implémentation spécifique

L'arrière-plan de l'application consiste à enregistrer l'état après la connexion de l'utilisateur et à supprimer le état après la sortie

mutations.js

ADD_LOGIN_USER (state,data) { //登入，保存状态 
 sessionStorage.setItem("username", data); //添加到sessionStorage 
 sessionStorage.setItem("isLogin",true); 
 state.username=data,  //同步的改变store中的状态 
 state.isLogin=true 
 }, 
 SIGN_OUT (state) { //退出，删除状态 
 sessionStorage.removeItem("username"); //移除sessionStorage 
 sessionStorage.removeItem("isLogin"); 
 state.username=''  //同步的改变story中的状态 
 state.isLogin=false 
 }

getters.js

isLogin (state) { 
 if (!state.isLogin) { 
  state.isLogin=sessionStorage.getItem('isLogin'); //从sessionStorage中读取状态 
  state.username=sessionStorage.getItem('username'); 
 } 
 return state.username 
 }

L'idée générale de mise en œuvre est de garder le statut de l'histoire dans vuex cohérent avec sessionStorage (obtenir la valeur de sessionStorage)

4. Mots ultérieurs

J'ai marché sur une grande fosse auparavant, je n'avais pas remarqué cette vuex. peut faire changer les composants de manière réactive, permettant aux composants de prendre directement la valeur de sessionStorage. Je dois encore actualiser pour voir l'effet après la sortie.

Supplément :

Regardons la différence entre le stockage vuex et le stockage local (stockage local, stockage de sessions)

1. Différence la plus importante : vuex est stocké en mémoire, tandis que localstorage est stocké localement sous forme de fichiers

2. Scénarios d'application : vuex est utilisé pour transférer des valeurs entre composants, et localstorage est principalement utilisé pour transférer des valeurs entre différentes pages.

3. Permanence : la valeur stockée dans vuex sera perdue lors de l'actualisation de la page, mais pas le stockage local.

Remarque : De nombreux étudiants pensent que le stockage local peut être utilisé à la place de vuex. C'est effectivement possible pour des données immuables, mais lorsque les deux composants partagent une source de données (Objet ou Array. ), si l'un des composants modifie la source de données et souhaite que l'autre composant réponde au changement, localstorage ne peut pas le faire. La raison est la différence 1.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes pour mettre en œuvre l'impression partielle de la page en Angular

Explication détaillée de l'utilisation de composants communs dans Vue

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!