Beispielcode zur Implementierung des Seiten-Cachings im Vue-Mobilprojekt

Hintergrund

Auf Mobilgeräten ist das Caching zwischen Seitensprüngen eine wesentliche Voraussetzung.

Beispiel: Startseite => Listenseite => Detailseite.

Beim Aufrufen der Listenseite von der Startseite aus muss die Listenseite aktualisiert werden, und beim Zurückkehren von der Detailseite zur Listenseite muss die Listenseite den Seitencache beibehalten.

Die Startseite lassen wir normalerweise im Cache-Zustand.

Die Detailseite wird aktualisiert, unabhängig davon, über welchen Eingang Sie hereinkommen.

Umsetzungsideen

Wenn wir über Seiten-Caching sprechen, müssen wir die Keep-Alive-Komponente in Vue erwähnen. Keep-Alive bietet eine Routing-Caching-Funktion. Dieser Artikel verwendet diese und Vuex hauptsächlich, um das Seitensprung-Caching in der Anwendung zu implementieren.

Vuex verwaltet ein CachePages-Array, um die Seiten zu speichern, die aktuell zwischengespeichert werden müssen.
Die Keep-Alive-Includes sind auf cachePages eingestellt.
Fügen Sie den Routenmetadaten die benutzerdefinierten Felder needCachePages oder keepAlive hinzu. needCachePages ist ein Array. Dies bedeutet, dass die Route zwischengespeichert wird, wenn sich die von der Route aufzurufende Seite im Array befindet. keepAlive bedeutet, dass der Cache beibehalten wird, unabhängig davon, welche Seite aufgerufen wird, z. B. die Homepage der App.
Wenn sich im Routing Guard beforeEach die zu überspringende Routing-Seite in den needCachePages der aktuellen Route befindet, wird die aktuelle Route zu cachePages hinzugefügt, andernfalls wird sie gelöscht.

Konkrete Umsetzung

Inhalt der Vuex-Implementierung

// src/store/modules/app.js

Standard exportieren {
 Zustand: {
  // Seiten-Cache-Array cachePages: []
 },
 
 Mutationen:
  // Cache-Seite hinzufügen ADD_CACHE_PAGE(state, page) {
   wenn (!state.cachePages.includes(Seite)) {
    status.cachePages.push(Seite)
   }
  },
  
  // Cache-Seite löschen REMOVE_CACHE_PAGE(state, page) {
   wenn (state.cachePages.includes(Seite)) {
    Zustand.cachePages.splice(Zustand.cachePages.indexOf(Seite), 1)
   }
  }
 }
}

// src/store/getters.js

const getter = {
 cachePages: Status => status.app.cachePages
}
Standardgetter exportieren

// src/store/index.js

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Vue.Verwenden(Vuex)

Benutzer aus „./modules/user“ importieren
App aus „./modules/app“ importieren
Getter aus „./getters“ importieren

// Exportiere das Store-Objekt export default new Vuex.Store({
 Getter,
 Module:
  Benutzer,
  App
 }
})

In App.vue setzt der Keep-Alive-Include cachePages

<keep-alive :include="cachePages">
 <router-view :key="$route.fullPath"></router-view>
</am Leben erhalten>

berechnet: {
 ...mapGetters([
  „cachePages“
 ])
}

Routing-Konfiguration

{
  Pfad: '/home',
  Name: "Home",
  Komponente: () => import('@/views/tabbar/Home'),
  Meta: {
   Titel: 'Homepage',
   keepAlive: wahr
  }
},
{
  Pfad: '/list',
  Namensliste',
  Komponente: () => import('@/views/List'),
  Meta: {
   Titel: 'Listenseite',
   needCachePages: ['ListDetail']
  }
},
{
  Pfad: '/list-detail',
  Name: "ListDetail",
  Komponente: () => import('@/views/Detail'),
  Meta: {
   Titel: „Detailseite“
  }
}

Routenwächter

Vue von „vue“ importieren
Router von „vue-router“ importieren
Store aus „@/store“ importieren
Vue.use(Router)

// Alle Routen im Modulordner importieren const files = require.context('./modules', false, /\.js$/)
let Module = []
files.keys().forEach(key => {
 Module = Module.concat(Dateien(Schlüssel).Standard)
})

// Routing const Routen = [
 {
  Weg: '/',
  Umleitung: '/home',
 },
 ...Module
]

const router = neuer Router({
 Modus: "Hash",
 Routen: Routen
})


Funktion istKeepAlive(Route) {
 wenn (route.meta && route.meta.keepAlive) {
  store.commit('ADD_CACHE_PAGE', Route.Name)
 }
 wenn (route.kinder) {
  route.children.forEach(child => {
   istKeepAlive(Kind)
  })
 }
}

Routen.fürJeden(Element => {
 isKeepAlive(Artikel)
})

// Globaler Routing-Schutz router.beforeEach((to, from, next) => {
 wenn (von.meta.needCachePages und von.meta.needCachePages.includes(zu.name)) {
  store.commit('ADD_CACHE_PAGE', von.name)
 } sonst wenn (von.meta.needCachePages) {
  store.commit('REMOVE_CACHE_PAGE', von.name)
 }
 // Der erste Cache-Fehler der Seite tritt auf. Es wird spekuliert, dass es eine Verzögerung von Vuex zum Keep-Alive-Cache gibt. //Hier wird eine Verzögerung von 100 Millisekunden verwendet, um setTimeout(() => { zu lösen.
  nächste()
 }, 100)
})

Standardrouter exportieren

Wiederherstellen der Position der Seiten-Bildlaufleiste

Obwohl die Seite zu diesem Zeitpunkt zwischengespeichert ist, kehrt die Bildlaufleiste jedes Mal nach oben zurück.

Bei zwischengespeicherten Seiten werden die aktivierten und deaktivierten Hooks ausgelöst und diese beiden Hooks können verwendet werden, um die Position der Bildlaufleiste wiederherzustellen.

Beim Verlassen der Seite, also beim Auslösen der Deaktivierung, wird die Position der Bildlaufleiste erfasst.

Beim Zurückkehren zur Seite, also bei Auslösen der Aktivierung, wird die Position der Bildlaufleiste wiederhergestellt.

// Erstelle ein Mixin
// src/mixins/index.js

exportiere const savePosition = (scrollId = 'app') => {
 zurückkehren {
  Daten() {
   zurückkehren {
    myScrollTop: 0
   }
  },
  
  aktiviert() {
   const Ziel = Dokument.getElementById(scrollId)
   Ziel && Ziel.scrollTop = dies.myScrollTop
  },
  
  vorRouteAbfahren(nach, von, weiter) {
   const Ziel = Dokument.getElementById(scrollId)
   dies.myScrollTop = ziel.scrollTop || 0
   nächste()
  }
 }
}

Hier wurde festgestellt, dass bei Verwendung von „Deaktiviert“ die Seite zu schnell ausgeblendet wird, wodurch die erhaltene Höhe der Knoten-Bildlaufleiste 0 beträgt. Daher wird „beforeRouteLeave“ verwendet.

Verwenden Sie es auf Seiten, die zwischengespeichert werden müssen

<Skript>
importiere { savePosition } von '@/mixins'

Standard exportieren {
 Mixins: [neue Speicherposition()]
}
</Skript>

Wenn die Seite den Scroll-Container anpasst, können Sie die Scroll-Container-ID übergeben

<Vorlage>
  <div id="scroll-container" style="Höhe: 100vh; Überlauf-y: scroll;">

  </div>
</Vorlage>

<Skript>
importiere { savePosition } von '@/mixins'

Standard exportieren {
 Mixins: [neue Speicherposition ('Scroll-Container')]
}
</Skript>

Beachten

Meine Freunde stellen mir oft eine Frage: Warum gibt es keinen Caching-Effekt, nachdem ich ihn konfiguriert habe?

Zu diesem Zeitpunkt müssen Sie auf einen Punkt achten. Einer der Schlüssel zum Keep-Alive-Betrieb besteht darin, dass der Name in der Route mit dem Namen in der VUE-Datei übereinstimmen muss.

Sollte Dein Cache nicht greifen, überprüfe bitte zunächst, ob die beiden Namen und needCachePages stimmig sind.

Gedanken und Mängel

Diese Lösung habe ich vor über einem Jahr umgesetzt. Jetzt denke ich, dass es noch einige Mängel gibt, z. B. die Notwendigkeit, needCachePages jedes Mal in der Route zu konfigurieren.

Tatsächlich wird auf Mobilgeräten die vorherige Seite immer zwischengespeichert, wenn Sie zur vorherigen Seite zurückkehren, genau wie beim Entwickeln eines Miniprogramms. Wenn wir „navigateTo“ aufrufen und dann zurückkehren, wird die Seite immer zwischengespeichert und erfordert keine manuelle Konfiguration.

Die Idee besteht nun darin, eine globale Sprung-API in Vue bereitzustellen. Solange die API aufgerufen wird, wird die aktuelle Seite zwischengespeichert. Wenn ein Aktualisierungsvorgang erforderlich ist, können Sie Ihre Logik aktiviert ausführen, wie im Miniprogramm onShow.

Damit ist dieser Artikel zur Implementierung des Seiten-Cachings in einem mobilen Vue-Projekt abgeschlossen. Weitere Inhalte zum Vue-Seiten-Caching finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!