Que faire si les données ne peuvent pas être enregistrées après l'actualisation de la page vuex

Cette fois, je vais vous montrer comment gérer l'impossibilité de sauvegarder les données après l'actualisation de la page vuex. Quelles sont les précautions à prendre pour gérer l'impossibilité de sauvegarder les données après l'actualisation de la page vuex ? cas, jetons un coup d'oeil.

1. Raisons

2. Solution

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

J'utilise sessionStorage ici Ce qui doit être noté ici, c'est que les variables dans vuex sont réactives, mais sessionStorage ne l'est pas lorsque vous changez. l'état dans vuex, le composant le détectera, mais pas sessionStorage. La page doit être actualisée pour voir le changement, donc l'état dans vuex doit être obtenu à partir de sessionStorage, afin que le composant puisse changer de manière réactive

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 l'é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é que vuex pouvait faire changer les composants de manière réactive, permettant aux composants de le faire directement. prenez la valeur de sessionStorage. Je dois encore actualiser pour voir l'effet après avoir quitté.

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, tandis que 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 inchangées, mais lorsque deux composants partagent une source de données (objet ou tableau), si l'un des composants modifie les données. source, lorsque vous souhaitez qu'un 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 :

Comment JS convertit les lignes et les colonnes d'un tableau bidimensionnel

Explication détaillée de la pratique de redux-thunk cas de projet

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!