Vue でキープアライブを使用した後にキャッシュをクリアする方法

Vue でキープアライブを使用した後にキャッシュをクリアする方法

キープアライブとは何ですか?

通常の開発では、コンポーネントによっては複数回初期化する必要のないものもあります。このとき、コンポーネントの状態が変更されず、次回表示されるときにコンポーネントが再初期化されないように、コンポーネントを永続化する必要があります。

つまり、keepalive は Vue の組み込みコンポーネントであり、これを使用すると、含まれるコンポーネントの状態を保持したり、再レンダリングを回避したりできます。これをコンポーネントキャッシュと呼びます

基本的な使い方

<キープアライブ>
    <component /> // コンポーネント</keep-alive>

要件:リスト ページから詳細ページに入り、リスト ページに戻るとクエリ条件は保持されますが、他のタブに切り替えるとクエリ条件はクリアされます。

解決策:クエリ条件を保持するのは非常に簡単で、直接 keep-alive を導入するだけですが、それらをクリアしたい場合は、Vue 自体にはそれらを直接クリアするための API がないため、別途処理する必要があります。

参考記事: http://aspedrom.com/5HD5

router/index はルートをインターセプトして処理します。

beforeRouteLeave:function(to, from, next){
    // ルートを離れるときにキープアライブクリアを追加する
    if (from && from.meta.rank && to.meta.rank && from.meta.rank == to.meta.rank)
    ここでの判断は、前のレイヤーに戻るかどうかです。ここでの判断ロジックは、自分の業務に合わせて変更し、このレイヤーのキャッシュを破棄するかどうかを決めることができます。
        (this.$vnode && this.$vnode.data.keepAlive) の場合
        {
            (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) の場合
            {
                (this.$vnode.componentOptions) の場合
                {
                    var キー = this.$vnode.key == null
                                ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                : this.$vnode.key;
                    var キャッシュ = this.$vnode.parent.componentInstance.cache;
                    var キー = this.$vnode.parent.componentInstance.keys;
                    if (キャッシュ[キー])
                    {
                        if (キーの長さ) {
                            var インデックス = keys.indexOf(キー);
                            (インデックス>-1)の場合{
                                キーを連結します(インデックス、1);
                            }
                        }
                        キャッシュ[キー]を削除します。
                    }
                }
            }
        }
        これを破棄します。
    }
    次();
},

ルートにメタも追加します:

{
    //アカウントリストのパス: '/account',
    名前: 'アカウント',
    コンポーネント: () => import('../views/account/index.vue'),
    meta: { title: 'アカウントリスト' ,rank:1.5}
  },
  {
    //アカウントパスを追加: '/accountadd',
    名前: 'accountadd',
    コンポーネント: () => import('../views/account/add.vue'),
    meta: { title: 'アカウントを追加' ,rank:2.5}
  },
  {
    // アカウントパスの編集: '/accountedit/:id',
    名前: 'accountedit',
    コンポーネント: () => import('../views/account/add.vue'),
    meta: { title: 'アカウントを編集' ,rank:2.5}
  },
  {
    // ロールリストのパス: '/role',
    名前: '役割',
    コンポーネント: () => import('../views/role/index.vue'),
    meta: { title: '役割リスト' ,rank:1.5}
  },

要約する

Vue で keep-alive を使用した後のキャッシュクリアに関するこの記事はこれで終わりです。keep-alive キャッシュクリアに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueのキープアライブコンポーネントは、複数レベルのネストされたルートのキャッシュを実装します。
  • Vue のルーティングガードとキープアライブライフサイクルの詳細な説明
  • Vue のキープアライブの詳細な説明
  • Vue におけるキープアライブ マルチレベル ルーティング キャッシュの問題
  • vue3 キャッシュページキープアライブと統合ルーティング処理の詳細な説明
  • Vueキープアライブの実装原理の分析

<<:  MySQL InnoDB row_id 境界オーバーフロー検証方法の手順

>>:  Windows での PyTorch 開発環境のインストール チュートリアル

推薦する

Docker+Selenium Grid に基づく技術アプリケーションをテストするためのサンプル コード

Selenium Grid の紹介Selenium Grid のいくつかの新しい機能は、今後リリース...

vue 要素 el-transfer にドラッグ機能を追加

コア資産管理プロジェクトでは、el-transfer にドラッグ アンド ドロップによる並べ替えと、...

Debian ベースの Linux システム ソフトウェア インストール コマンドの詳細な説明 (推奨)

Debian の紹介Debian は、広い意味では、フリーなオペレーティング システムの作成に専念...

ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験(グラフィックチュートリアル)

インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...

CSS3 は 3D キューブの読み込み効果を作成します

簡単な説明これは CSS3 のクールな 3D キューブのプリロード効果です。この特殊効果は、シンプル...

バックアップと削除のためにリアルタイムでステートメントを検出するMySQLトリガーの考え方の詳細な説明

問題の説明: ユーザーは、テーブルに「違反」という単語を含むフィールドが時々表示されることを要求して...

Docker で Rancher をデプロイする方法 (落とし穴なし)

操作前に必ずお読みください:注意:管理に rancher を使用する場合は、k8s クラスターが構築...

iframeリフレッシュ方式の方が便利

iframeを更新する方法1. 更新するには、JavaScriptのdocument.fr.loca...

MySQL データベースのデータ テーブルの最適化、外部キーの分析、3 つのパラダイムの使用

この記事では、例を使用して、MySQL データベースのデータ テーブルの最適化、外部キーの使用、およ...

Vue3 + TypeScript 開発の概要

目次Vue3 + TypeScript 学習1. 環境設定1.1 最新のVue scaffoldin...

Linux での Nginx アンチホットリンクと最適化の実装コード

バージョン番号を非表示バージョン番号は非表示になっていません。セキュリティを強化するために、バージョ...

ブラウザでTIF形式の画像を表示する方法

ブラウザはTIF形式の画像を表示しますコードをコピーコードは次のとおりです。 <html>...

VMware ESXi 6.0 および仮想マシンのインストール チュートリアルの展開 (画像とテキスト)

社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...

MySQL インデックスの原理と最適化の詳細な説明

序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...

MySQLでテーブルデータを削除する方法

MySQL でデータを削除する方法は 2 つあります。1 つは DELETE ステートメント、もう ...