Was tun, wenn die Daten nach der Aktualisierung der Vuex-Seite nicht gespeichert werden können?

Dieses Mal zeige ich Ihnen, wie Sie mit der Unfähigkeit umgehen, Daten nach der Aktualisierung der Vuex-Seite zu speichern. Was sind die Vorsichtsmaßnahmen für den Umgang mit der Unfähigkeit, die Daten nach der Aktualisierung der Vuex-Seite zu speichern? Fall, werfen wir einen Blick darauf.

1. Gründe

2. Lösung

localStorage hat keine zeitliche Begrenzung, es sei denn, es wird entfernt, sessionStorage ist die Sitzung und die Sitzung ist beim Browser ist geschlossen Ende, es gibt ein Zeitlimit und es hat ein eigenes Baidu

Ich verwende hier sessionStorage. Hier ist zu beachten, dass die Variablen in vuex reagieren, sessionStorage jedoch nicht Der Status in vuex wird von der Komponente erkannt, sessionStorage jedoch nicht. Die Seite muss aktualisiert werden, um die Änderung zu sehen. Daher sollte der Status in vuex von sessionStorage abgerufen werden, damit die Komponente reagieren kann 🎜>

3. Spezifische ImplementierungDer Anwendungshintergrund besteht darin, den Status nach der Anmeldung des Benutzers zu speichern und den Status nach dem Beenden zu entfernen

Mutationen .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 (Wert aus sessionStorage abrufen)

4. Spätere Worte Ich habe vorher nicht bemerkt, dass Vuex Komponenten reaktionsschnell ändern kann, sodass die Komponenten den Wert direkt annehmen können von sessionStorage musste ich aktualisieren, um den Effekt nach dem Beenden zu sehen.

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änderte Daten möglich, aber wenn zwei Komponenten eine Datenquelle (Objekt oder Array) gemeinsam nutzen, ändert eine der Komponenten die Daten Quelle: Wenn Sie möchten, dass eine 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:

Wie JS zweidimensionale Array-Zeilen und -Spalten konvertiert

Detaillierte Erläuterung der Redux-Thunk-Praxis Projektfall

Das obige ist der detaillierte Inhalt vonWas tun, wenn die Daten nach der Aktualisierung der Vuex-Seite nicht gespeichert werden können?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!