vue keepAlive キャッシュクリア問題事例の詳細な説明

vue keepAlive キャッシュクリア問題事例の詳細な説明

Keepalive は Vue プロジェクトでのキャッシュによく使用され、基本的な要件を満たすのに非常に便利です。しかし、異なる条件に応じて同じページをキャッシュするかしないかを決めるのは少し面倒です。

まず、問題点をリストアップします。

1.

<キープアライブv-if="xxx">
          <ルータービュー />
</キープアライブ>
<キープアライブv-else>
          <ルータービュー />
</キープアライブ>

インターネット上にはこのような方法がたくさんあります。この方法を使用すると、キャッシュされたアイテムを削除することはできません。実際には、この方法では、キャッシュされたページとキャッシュされていないページを2つのコンポーネントに分けて表示します。一般的にはそのように見えますが、実際には条件に基づいて異なる時間に異なるコンポーネントが表示されます。

2.

vm.$destroy()

既存のキャッシュを削除しようと考えるとき、ほとんどの人がまず考えるのはキャッシュを削除する方法だと思うので、私もキャッシュを削除する方法を探してみました。次に、vue の destroy メソッドが呼び出されます。それが破壊されたとき、それが実現されたことがわかり、とても嬉しくなります!キャッシュが削除されました〜それで、修正されたと思って、別のものを開発しに行きます。ある日突然気づくんですよね? ページがキャッシュされないのはなぜですか? 調査の結果、$destroy() を呼び出したページはキャッシュされなくなることが判明しました。 。

最終的に私の解決策は:

テンプレート
<keep-alive :include="keepAlive.join(',')">
         <ルータービュー />
</キープアライブ>

ヴュークス

キープアライブ: [
        '/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',
    ]、

必要なキャッシュ ページを動的に変更するには、include+vuex を使用します。 Include はコンポーネントの名前を受け入れます (ここでは名前を付けるのが面倒なので、パスを使用して名前を付けますが、実際にはパスは使用されません)

このように、特定のページをキャッシュする必要がある場合は、その名前を keepalive 配列に追加し、必要ない場合は対応するページを削除します。これにより、keepAliveのキャッシュ削除効果が実現されます。

これで、vue keepAlive キャッシュクリア問題の詳細なケースに関するこの記事は終了です。vue keepAlive キャッシュクリア問題のより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue プロジェクトで keepAlive を使用する手順 (超実践版)
  • Vue フロントエンド開発における keepAlive の使用方法の詳細な説明
  • Vue での keepAlive の使用例の詳細な説明
  • VueのkeepAliveコンポーネントの機能と使い方の詳細な説明
  • Vue で keepAlive を使用するときにキャッシュされない問題を解決する
  • Vue の keepAlive 設定が有効にならない場合の解決方法

<<:  nginx を使用した負荷分散モジュールの解釈

>>:  よく使われる3つのMySQLデータ型

推薦する

Div はフラッシュを覆います。フラッシュ透過方式により、フラッシュ上に DIV レイヤーを配置できます。

2つのタイプがあります: (異なるブラウザ) 1. IEブラウザで利用可能コードをコピーコードは次の...

mysql 行列変換サンプルコード

1. 需要3 つのテーブルがあります。一定期間にわたるさまざまな抗生物質感受性の結果、つまり rep...

Dockerを使用してGitlabを素早くデプロイする方法

1. GitLabイメージをダウンロードする docker pull gitlab/gitlab-c...

MySQLサブクエリの詳細な例

サブクエリの分類返された結果セットによる分類サブクエリは、返される結果セットの違いに応じて、テーブル...

DockerでGPUを使用するプロセスの詳細な説明

目次tf-gpu をダウンロード取得したtf-gpuイメージに基づいて独自のイメージを構築するイメー...

Django+mysql の設定と簡単な操作データベースのサンプルコード

ステップ1: MySQLドライバをダウンロードするcmdは作成されたDjangoプロジェクトディレク...

JavaScript キャンバス テトリス ゲーム

テトリスは非常に古典的な小さなゲームで、私もそれを書いてみました。しかし、できるだけ簡潔で論理的なコ...

Windows 版 MySQL のインストール、起動、基本設定に関する詳細なグラフィック チュートリアル

ダウンロード:ステップ 1: ウェブサイトを開きます (ダウンロードするには公式ウェブサイトにアクセ...

Vuexの補助関数の使い方

目次マップ状態マップゲッターマップミューテーションマップアクション複数のモジュールマップ状態 ...

jsネイティブ構文プロトタイプ、__proto__、コンストラクタの徹底的な理解

目次1 はじめに2 前提条件2.1 データ型2.2 それが自身のプロパティであるかどうかを判断する ...

HTML ページでギリシャ文字を使用する方法

ギリシャ文字は、特に数学や物理学などの科学技術分野で非常によく使用される記号列であり、特定の意味を持...

MySQL 8.0.21 の最新バージョンのダウンロード、インストール、設定に関する詳細なチュートリアル

1. ダウンロード1. インストールパッケージをダウンロードするMySQL ダウンロード パス: h...

DockerはホストのMysql操作に接続します

今日、会社のプロジェクトでは docker を設定する必要があります。Windows に正常にインス...

MySQL インデックス失敗の原理

目次1. インデックス失敗の理由2. インデックスの秩序が崩れる状況を見てみましょう。 - インデッ...

Vueは商品詳細ページの虫眼鏡機能を実装します

この記事では、商品詳細ページの虫眼鏡を実装するためのVueの具体的なコードを参考までに共有します。具...