поддерживать активность кеша Vue для всего сайта: динамически удалять кеш

внешний интерфейс Vue.js Vuex vue-router

Перед прочтением этой статьи предполагается, что все знакомы с vue и keep-alive, поэтому я перестану рассказывать о сопутствующих материалах и перейду сразу к основному тексту.

Если вы терпеливы, выслушайте меня подробно.Если вы столкнулись с подобными проблемами или ищете решение, то вы можете сразу перейти к концу статьи, чтобы увидеть вывод.

Эта статья из серии 1: поддержание активности кеша Vue для всего сайта: динамическое удаление кеша

Серия 2:Кэш Vue для всего сайта 2: как спроектировать кеш для всего сайта

Серия 3:Vue-маршрутизатор - затем Vue Full-сайт Cache: передача данных между передним и задним страницами

Серия 4:vue-router-then of Vue full-site cache: принцип реализации

предисловие

Если взять в качестве примера бухгалтерский проект, общие сценарии включают:首页、记到账页面、选择合同、新建合同、选择客户、新建客户эти страницы.

На этих страницах очевидно, что поведение пользователя при просмотре должно постепенно углубляться, а это означает, что страница просмотра постоянно развивается.

И между этими страницами по-прежнему существует взаимодействие, два интерактивных поведения:

  • 1. При переходе пользователя всегда вводите новую страницу. (Например, после повторной загрузки списка на странице списка контрактов, ввода одной из деталей контракта, а затем возврата, она должна по-прежнему оставаться в той же позиции на предыдущей странице списка, а не обновлять страницу списка.)
  • 2. Когда пользователь возвращается, он должен иметь возможность сохранить предыдущую страницу данных и продолжить операцию. (Например, вам нужно выбрать контракт при зачислении на счет, и вы можете создать новый контракт при выборе контракта. При создании нового контракта вы можете заполнить кучу данных для выбора клиента, а когда вы выбираете клиента, вы создаете клиента, тогда этот набор операций должен быть в состоянии прибыть:创建完客户后继续新建合同，建完合同后继续记该合同的到账)

Вышеприведенное изображение является реальным эффектом в демонстрационном проекте.В текущих общих решениях для разработки vue обычно вводится vuex или localStorage, а данные на странице постоянно сохраняются и вызываются на каждой странице.Я думаю,Это ненаучно и неэлегантно.

Что не так с keep-alive

Vue поддерживает компоненты Keep-alive. Если этот параметр включен, все данные на странице будут сохранены. Поэтому приведенное выше интерактивное поведение 2后退时保留前一页数据继续操作нет проблем.

Проблема в интерактивном поведении用户前进时总是进入新页面, но после кэширования вы не всегда можете вводить новые страницы, вы всегда вводите кэшированные страницы, что является головной болью.

официально предоставленincludeа такжеexcludeФункция, которую вы можете решить, какие страницы используют кэш и какие страницы не следует.Связь

Однако проблема вернулась к исходной точке и не решила нас.酌情决定是否使用已缓存的缓存это требование.

Так много людей придумали способ在离开页面时销毁这个页面Это нормально, но не может, тут баг, компонент уничтожает кеш, а кеш все равно есть:

Поэтому кто-то предложил希望keep-alive能增加可以动态删除已缓存组件的功能,issue

Это старая тема, и раньше не было никакого прогресса.Основная причина в том, что keep-alive не может правильно обрабатывать уничтоженные компоненты.

попробуй это исправить

если это может быть достигнуто动态使用缓存С этой функцией все проблемы будут решены.

Изначально я изучил код keep-alive и нашел вот такой кусок кода:

Так что, думаю, если судить здесь如果组件已被销毁则不使用缓存, это решено эту проблему, поэтому я представилPR:

Однако этот PR слишком поздно, я сдамся.

насилие для решения проблемы

Я продолжал исследовать, есть ли другие решения, и тогда, когда я напечатал переменные компонента, я нашел такое знакомое поле:

Разве это не компонент keep-alive?Я быстро нажал на него и посмотрел, и нашел что-то более знакомое:

Итак, эта вещь становится простой, просто идите по карте, чтобы найти ключ.Перед уничтожением компонента мы найдем компонент поддержки активности родителя, где находится компонент маршрутизации, манипулируем списком кеша в нем и принудительно удаляем кеш в нем, и проблема решится легко, да не очень прямо и бурно.

В заключение

Сохраняйте вживую настройки по умолчанию, которые не поддерживают динамически разрушают кэшированные компоненты, поэтому решение, приведенное здесь, является прямым управлением списком Cahce в компоненте Count-Alvie, кэш удаления насилия:

//使用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();
    },
});

послесловие

В этой статье в основном рассматривается, как динамически удалять кэш проверки активности и другие如何设定页面层级、如何在前后页之间进行数据传递Пожалуйста, с нетерпением ждите «vue-router-then of Vue full site cache: передача данных между главной и последней страницами».

Читайте дальше - серия 2:Кэш Vue для всего сайта 2: как спроектировать кеш для всего сайта

Оригинальный текст взят из блога Аксинга:Wanyaxing.com/blog/201807

Категории