Detaillierte Erläuterung des Problemfalls beim Löschen des Vue KeepAlive-Cache

Keepalive wird häufig zum Caching in Vue-Projekten verwendet, was sehr praktisch ist, um grundlegende Anforderungen zu erfüllen. Es ist jedoch etwas mühsam, die gleiche Seite je nach unterschiedlichen Bedingungen zwischenzuspeichern oder nicht zwischenzuspeichern.

Listen Sie zunächst die Nachteile auf:

1.

<keep-alive v-if="xxx">
          <Router-Ansicht />
</am Leben erhalten>
<keep-alive gegen sonst>
          <Router-Ansicht />
</am Leben erhalten>

Im Internet gibt es viele solcher Methoden. Bei Verwendung dieser Methode können die zwischengespeicherten Elemente nicht gelöscht werden. Tatsächlich teilt diese Methode die zwischengespeicherten und die nicht zwischengespeicherten Seiten zur Anzeige in zwei Komponenten auf. Obwohl es im Allgemeinen so aussieht, werden je nach Ihren Bedingungen tatsächlich unterschiedliche Komponenten zu unterschiedlichen Zeiten angezeigt.

2.

vm.$destroy()

Wenn man darüber nachdenkt, den vorhandenen Cache zu entfernen, denken die meisten Leute vermutlich zuerst darüber nach, wie man den Cache löscht. Deshalb habe ich auch versucht, eine Möglichkeit zu finden, den Cache zu löschen. Anschließend wird die Destroy-Methode von Vue aufgerufen. Wenn es zerstört ist, werden Sie sehr glücklich sein, festzustellen, dass es verwirklicht wurde! Der Cache wird gelöscht. ~ Sie denken also, das Problem sei behoben, und beginnen mit der Entwicklung von etwas anderem. Eines Tages wird es Ihnen plötzlich klar, nicht wahr? Warum wird meine Seite nicht zwischengespeichert? Nach einigen Untersuchungen wurde festgestellt, dass Seiten, die $destroy() aufriefen, nicht mehr zwischengespeichert wurden. .

Zum Schluss noch meine Lösung:

Vorlage

<keep-alive :include="keepAlive.join(',')">
         <Router-Ansicht />
</am Leben erhalten>

vuex

keepAlive: [
        '/joinManage/register/add-step1',
        '/joinManage/register/add-step2',
        '/joinManage/register/add-step3',
        '/joinManage/config/add-step1',
        '/joinManage/config/add-step2',
        '/joinManage/config/add-step3',
        '/joinManage/config/add-step4',
        '/joinManage/config/add-step5',
    ],

Verwenden Sie include+vuex, um die erforderlichen Cache-Seiten dynamisch zu ändern. Include akzeptiert den Namen der Komponente (ich finde die Benennung hier problematisch, daher verwende ich einfach den Pfad zur Benennung, aber der Pfad wird nicht wirklich verwendet)

Wenn wir auf diese Weise eine bestimmte Seite zwischenspeichern müssen, fügen wir ihren Namen dem Keepalive-Array hinzu und löschen die entsprechende Seite, wenn sie nicht benötigt wird. Dadurch wird der Cache-Löscheffekt von keepAlive erreicht

Dies ist das Ende dieses Artikels über den detaillierten Fall des Problems beim Löschen des Vue-KeepAlive-Cache. Weitere relevante Inhalte zum Problem beim Löschen des Vue-KeepAlive-Cache finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!