Durch das Aktualisieren der Seite verschwinden die Vuex-Daten nicht und die Seite springt nicht (ausführliches Tutorial).

Dieser Artikel stellt hauptsächlich die detaillierte Lösung zum Aktualisieren der Vuex-Daten der Seite vor, ohne zu verschwinden und nicht zur Seite zu springen. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Lassen Sie mich zuerst etwas sagen

Vuex hat eine Weile an der Routing-Abhörfunktion herumgebastelt, und ich bin endlich hier, um es zuerst zu teilen Lassen Sie mich zunächst sagen, dass es keine grundlegende Einführung gibt, indem Sie die Methode zum Speichern von SessionStorage im Anmeldestatus verwenden!!! >Aktualisieren

Im Gegensatz zum Neustart des Projekts werden die zuvor erhaltenen Daten nur vorübergehend über den Speicher gespeichert und verschwinden, wenn das Projekt geschlossen wird. Dies ähnelt einem Neustart des Computers und der darin gespeicherten Daten RAM wird verschwinden. Aber die in Sessionstorage, Localstorage und Cookies gespeicherten Inhalte verschwinden nicht.

Vuex

Methoden und Ideen

Zuerst Alle, die mit Vuex vertraut sind, stellen auf der offiziellen Website vor, dass Vuex ein speziell für Vue.js-Anwendungen entwickeltes Statusverwaltungsmodell ist. Das heißt, die Daten im Store in Vuex sind temporär und stellen einige Variablen dar, wenn die Seite aktualisiert und neu geladen wird , alles wird gelöscht, und es gab keine zweite Anmeldung auf der Seite, der Vuex war immer leer, daher wurden mehrere Methoden abgeleitet

1 Aktualisieren Sie die Seite, weil sessionstorage (die Seite verschwindet, wenn Schließen der Seite), Localstorage und Cookie. Die Daten verschwinden nicht, sodass Sie alle angeforderten Daten darin speichern und bei Verwendung abrufen können

2. Verwenden Sie das Vuex-Plug-In

3. Geben Sie beim Anmelden das Token und den Anmeldestatus ein (Benutzerdefiniert). Weisen Sie Sessionstorage einen Wert zu. Wenn Sie die Seite aktualisieren (Routensprung), rufen Sie das Token und den Anmeldestatus von Sessionstorage ab und weisen Sie es dem Store zu - Fordern Sie die Daten der entsprechenden Seite an

Nachdem ich darüber nachgedacht habe, habe ich mich für Methode 3 entschieden, aber diese Methode muss mit Routing-Abfangen kombiniert werden. Nachdem das Routing abgeschlossen ist, posten Sie den Code

Code

Index

Aktionen

// 登录
 Login({ commit, state }, userInfo) {
  return new Promise((resolve, reject) => {
   login(userInfo).then(response => {
    let token = response.data.token;
    commit('SET_TOKEN', token);
    sessionStorage.setItem('token', token);  //获取到新的token的时候赋值给sessionStorage

    commit('SET_ISLOGIN', true);  // 登录成功修改store中的登录状态
    resolve()
   }).catch(error => {
    reject(error)
   })
  })
 },

Routing

Eine kurze Einführung: Route Das Abfangen entspricht dem „Lebenszyklus“ der Route. Sie können hier Folgendes tun: Was möchten Sie dieses Mal nur tun, bevor die Route springt? Verwenden Sie einfach router.beforeEach((to, from, next) => { // ... } Der spezifische Inhalt ist auf der offiziellen Website sehr detailliert

main.js

router.beforeEach((to, from, next) => {
 let isLogin = sessionStorage.getItem('isLogin');
 let token = sessionStorage.getItem('token');
 let id = sessionStorage.getItem('id');
 if (to.meta.requireAuth) {  // 判断是否有权限
  if (!store.state.isLogin && !isLogin && to.path !== '/login') {  // store和sessionStorage中登录状态都为false并且跳转到 不是登录的页面时 都强行跳转到登录页面  
   next({
    path: '/login',
   });
  } else if (!isLogin && to.path !== '/login') {  // 已经在登录页面进入首页的时候
   sessionStorage.setItem('isLogin', store.state.isLogin);
   next();
  } else if (isLogin && to.path !== '/login') {  // 登录进入后刷新页面时
   store.commit('SET_TOKEN', token);
   store.commit('SET_ISLOGIN', isLogin);
   store.commit('SET_ID', id);
   next();
  } else {
   next();
  }
 }
 else {
  next();
 }
});

pits

1. Ich habe das Routing-Interception in die Datei main.js geschrieben, seien Sie also vorsichtig. Es sollte über dem Vue-Mount (neues Vue) geschrieben werden

2. Wenn Sie auf „Anmelden“ klicken, wird das Die Anmeldemethode in Aktionen sollte früher sein als das Abfangen der Route

3. Vergessen Sie beim Abmelden nicht, die Variablen in sessionStorage zu löschen

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es hilfreich ist Dich in der Zukunft.

Verwandte Artikel:

So rufen Sie JSON mit js auf

Verwenden Sie GM-Zuschneiden in zusammengesetzten Bildern unter Nodejs

Tutorial zur Verwendung von Babel zur Installation und Konfiguration

Das obige ist der detaillierte Inhalt vonDurch das Aktualisieren der Seite verschwinden die Vuex-Daten nicht und die Seite springt nicht (ausführliches Tutorial).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!