So verhindern Sie das Löschen von Daten nach der Aktualisierung der Vuex-Seite

Dieses Mal zeige ich Ihnen, wie Sie verhindern können, dass die Daten nach der Aktualisierung der Vuex-Seite gelöscht werden, und welche Vorsichtsmaßnahmen gelten, um zu verhindern, dass die Daten nach der Aktualisierung der Vuex-Seite gelöscht werden Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

1. Gründe

2. Lösung

localStorage hat keine zeitliche Begrenzung, es sei denn, es wird entfernt, SitzungSpeicher ist eine Sitzung, Die Sitzung endet, wenn der Browser geschlossen wird, hat ein Zeitlimit und verfügt über ein eigenes Baidu.

Ich verwende hier sessionStorage. Hier ist zu beachten, dass die -Variable in vuex reagiert , aber sessionStorage ist nicht , wenn Sie den Status in vuex ändern, erkennt die Komponente die Änderung, sessionStorage jedoch nicht. Die Seite muss aktualisiert werden, um die Änderung zu sehen, daher sollte der Status in vuex von sessionStorage abgerufen werden Komponente kann auf Änderungen reagieren

3. Spezifische Implementierung

Der Anwendungshintergrund besteht darin, den Status zu speichern, nachdem sich der Benutzer angemeldet hat, und den zu entfernen Zustand nach dem Beenden

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 
 }

Die Gesamtidee der Implementierung besteht darin, den Status der Story in Vuex mit sessionStorage konsistent zu halten (den Wert abrufen). von sessionStorage)

4. Spätere Worte

Ich habe vorher nicht bemerkt, dass Vuex Komponenten ändern kann reaktionsfähig, sodass die Komponenten den Wert von sessionStorage direkt annehmen können. Sie müssen nach dem Beenden eine Aktualisierung durchführen.

Ergänzung:

Sehen wir uns den Unterschied zwischen Vuex-Speicher und lokalem Speicher (localstorage, sessionstorage) an

1. Wichtigster Unterschied: Vuex wird im Speicher gespeichert, während Localstorage lokal in Form von Dateien gespeichert wird

2. Anwendungsszenarien: Vuex wird zum Übertragen von Werten zwischen Komponenten verwendet, während Localstorage hauptsächlich zum Übertragen von Werten verwendet wird ​​zwischen verschiedenen Seiten Wert.

3. Dauerhaftigkeit: Der in vuex gespeicherte Wert geht verloren, wenn die Seite aktualisiert wird, localstorage jedoch nicht.

Hinweis: Viele Studenten glauben, dass localstorage anstelle von vuex verwendet werden kann. Dies ist zwar für unveränderliche Daten möglich, aber wenn die beiden Komponenten eine Datenquelle teilen (Objekt oder Array ), wenn eine der Komponenten die Datenquelle ändert und möchte, dass die andere Komponente auf die Änderung reagiert, kann localstorage dies nicht tun. Der Grund ist Unterschied 1.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Implementieren des teilweisen Druckens der Seite im Winkel

Detaillierte Erläuterung von die Verwendung gemeinsamer Komponenten in Vue

Das obige ist der detaillierte Inhalt vonSo verhindern Sie das Löschen von Daten nach der Aktualisierung der Vuex-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!