Vue全局キャッシュのkeep-alive:キャッシュを動的に削除

本文を読む前に、デフォルトではvueとkeep-aliveに詳しいので、関連資料をくどくど言わずに本文に入ります.
辛抱強く話して、私の話を聞いてください.もしあなたが似たような問題に遭遇したり、解決策を探したりしたら、直接文末に結論を読むことができます.
本編はシリーズ編1:Vue全局キャッシュのkeep-alive:キャッシュを動的に削除
シリーズ編2:Vue全局キャッシュ2:全局キャッシュの設計方法
シリーズ編3:Vue全局キャッシュのvue-router-then:前後ページデータ転送
シリーズ編4:Vue全局キャッシュのvue-router-then:実現原理
前言
1つの記帳項目の例として、一般的なシーンは 、 、 、 、 、 ページである.
これらのページの中で、明らかに、ユーザーの閲覧行為は次第に深く入り込むべきで、通俗的にはページを閲覧して絶えず前進している.
また、これらのページの間にはインタラクティブな2つのインタラクティブな動作があります.

1.ユーザーが進むと、いつも新しいページに入ります.(たとえば、契約リストページに複数回リストを繰り返しロードした後、そのうちの1つの契約詳細に入り、戻った場合、リストページを再リフレッシュするのではなく、前のリストページと同じ位置にとどまる必要があります.)

2.ユーザーが後退する場合は、前のページのデータを保持して操作を続行する必要があります.(例えば、帳簿に記入する際に契約を選択する必要があり、契約を選択する際に契約を新規作成することができ、契約を新規作成する際にデータの山を記入して顧客を選択することができ、顧客を選択する際に顧客を作成することができ、この山の操作は ， )

上図はdemoプロジェクトの実際の効果で、現在よく見られるvue開発案では、一般的にvuexやlocalStorageを導入し、各ページにページ内のデータを絶えず格納し、呼び出すのが一般的で、科学的ではなく優雅ではないと思います.
keep-alive何の問題だ?
vueはkeep-aliveコンポーネントをサポートし、有効にするとページ内のすべてのデータが保持されるので、上記のインタラクティブな動作2 は問題ありません.
問題は、インタラクティブな動作の ですが、キャッシュすると、いつも新しいページに入ることができません.いつもキャッシュページに入るのは頭が痛いです.
公式にはincludeとexcludeの特性が提供されており、どのページがキャッシュされていないかを決定することができます.リンク
しかし、問題はまた原点に戻って、私たちの という需要を解決していません.
そのため、 の方法を考えればいいのではないでしょうか.しかし、できません.ここでバグが発生し、コンポーネントがキャッシュを破棄しています.
そこで、 keep-alive 、issueを提案しました.
これは古い話題で、これまで進展していなかったが、keep-aliveが破壊されたコンポーネントを正しく処理できないことが核心的な原因だ.
この問題を解決しようとする という機能が実現できれば、すべての問題も解決されます.
最初、keep-aliveのコードを研究して、このようなコードを発見しました.
そこで、ここで と判断したら、この問題を解決したのではないかと思い、PRを提出しました.
でもこのPRがなかなか通らなかったので諦めました.
暴力でこの問題を解決する
他のシナリオがあるかどうかを検討し続け、コンポーネント変数を印刷するときに、このような見覚えのあるフィールドを見つけました.
これがkeep-aliveのコンポーネントではないでしょうか.急いで見てみましたが、もっと見覚えのあるものを見つけました.
そこで、このことは簡単になって、直接図に従って骥を求めて、私たちはコンポーネントを破壊する前に、ルートコンポーネントの父級のkeep-aliveコンポーネントを探して、その中のcacheリストを操作して、強引にその中のキャッシュを削除して、問題も迎刃して解決して、とても直接とても暴力的ではありませんか.
結論
keep-aliveのデフォルトでは、キャッシュされたコンポーネントの動的破棄はサポートされていません.したがって、ここで示す解決策は、keep-alvieコンポーネントのcahceリストを直接操作することによって、キャッシュを暴力的に除去することです.

//  Vue.mixin            ，                    。
Vue.mixin({
    beforeRouteLeave:function(to, from, next){
        if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
        {//            ，                   ，            。
            if (this.$vnode && this.$vnode.data.keepAlive)
            {
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
                {
                    if (this.$vnode.componentOptions)
                    {
                        var key = this.$vnode.key == null
                                    ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                    : this.$vnode.key;
                        var cache = this.$vnode.parent.componentInstance.cache;
                        var keys  = this.$vnode.parent.componentInstance.keys;
                        if (cache[key])
                        {
                            if (keys.length) {
                                var index = keys.indexOf(key);
                                if (index > -1) {
                                    keys.splice(index, 1);
                                }
                            }
                            delete cache[key];
                        }
                    }
                }
            }
            this.$destroy();
        }
        next();
    },
});

後語
本文は主にkeep-aliveキャッシュを動的に削除する方法について探求し、その他 、 などの問題については、「Vue全局キャッシュのvue-router-then:前後ページ数データ伝達」を期待してください.
引き続きお読みください-シリーズ編2:Vue全局キャッシュ2:全局キャッシュの設計方法
译文1星のブログから来ました:wanyaxing.com/blog/201807…