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 を応援していただければ幸いです。