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 開発環境のインストール チュートリアル

推薦する

JSのバイナリファミリーについての簡単な説明

目次概要ブロブBlob の動作BLOB ダウンロード ファイルブロブ画像のローカル表示BLOB ファ...

JS での filter() 配列フィルターの使用

目次1. はじめに2. 方法の紹介3. 使用例要約する1. はじめに配列フィルターは、フロントエンド...

Nginx のステータス監視とログ分析の詳細な説明

1. Nginx ステータス監視Nginx には、Nginx の全体的なアクセス ステータスを監視す...

MySQL のテーブル内のレコード数を制限する方法

目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...

SQL の左結合と右結合の原理と例の分析

テーブルが 2 つあり、テーブル A のレコードがテーブル B に存在しない可能性があります。左結合...

CSSクラス名の問題の詳細な説明

数字で始まる次の CSS クラス名は有効になりません。 .1番目{ 色: 赤; }有効な CSS ク...

MySQL におけるデータタイムとタイムスタンプの違い

MySQL には 3 つの日付型があります。日付(年-月-日)テーブル test(hiredate ...

dockerfile における ENTRYPOINT と CMD の組み合わせと違い

前回の記事【dockerコンテナのためのdockerfileを詳しく解説】では、dockerfile...

Vue でのカスタムディレクティブの基本的な使用方法

目次序文文章1. グローバル登録2. 部分登録3. フック機能とパラメータ設定4. 柔軟な使い方(1...

DockerはRedisをインストールし、操作用のビジュアルクライアントを導入します

1 はじめにRedis 、 ANSI C言語で開発されたKey-Valueベースの高性能NoSQLデ...

HTML フォームとフォーム内部タグの使用

コードをコピーコードは次のとおりです。 <html> <ヘッド> <t...

Docker で Spring-boot プロジェクトをデプロイするためのサンプル コード

1. 基本的な Spring-boot クイックスタート1.1 クイックスタート pom.xml は...

Docker ベースの Selenium 分散環境の構築

1.画像をダウンロードするdocker pull selenium/hub docker pull ...

フロントエンドJavaScriptの動作原理

目次1. JavaScript エンジンとは何ですか? 2. V8エンジン3. ランタイム環境4. ...

iviewは動的なフォームとカスタム検証期間の重複を実装します

フォーム項目を動的に追加するiview の動的なフォーム追加は非常に簡単です。フォーム項目を配列に設...