Лучшее событие для сохранения приложения Vue.js в localstorage

Question

Я пытаюсь найти наилучший способ сохранить состояние приложения в локальном хранилище, чтобы иметь возможность восстановить его при возврате в приложение.В частности, это для веб-приложения iOS (т.е. сохраняется на домашнем экране пользователя).Я не использую Vuex, так как это простое приложение.

В настоящее время я использую хук жизненного цикла updated() Vue.js , но я чувствую себя такизлишне, и, возможно, проблема с производительностью заключается в сохранении в локальном хранилище каждый раз, когда меняется состояние:

var app = new Vue({
    el: '#app',    
    updated: function() {
        this.saveAppState();
    }
});

Примечание. Приведенная выше функция saveAppState(); используется там, где я использую localStorage.setItem().

Apple Руководство по веб-контенту Safari (см. Таблицу 6-1) предлагает использовать hidepage, например:

window.addEventListener('pagehide', function(event) {
    app.saveAppState();
}

Однако это работает тольков мобильном Safari при перезагрузке страницы.Если я закрываю вкладку или когда добавляю приложение на домашний экран, после выхода из приложения (нажатия кнопки «Домой») и возврата мое состояние не сохраняется.

Я также пытался destroyed() крюк жизненного цикла, и это совсем не сработало.

Буду очень признателен за любые идеи и советы.

Answer 1

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

Я не используюVuex, поскольку это простое приложение.

Vuex не только для работы с большим магазином .Тем не менее, я избегал использования Vuex в небольших приложениях, потому что обработка хранилища, распределенного по приложению и компонентам, была приемлемой.Я не вижу кода или каких-либо подробностей, поэтому YMMV, но ... если вы не заинтересованы в использовании Vuex, вы все равно можете реализовать некоторые аспекты, которые помогут решить эту проблему.

1. Создатьединое хранилище
   Наличие унифицированного расположения означает, что ваши различные компоненты ссылаются на ваши данные, а не хранят их.
2. Изменяют состояние через унифицированный / согласованный интерфейс
   любое изменение всостояние должно проходить либо через одну и ту же функцию, либо по согласованной схеме.Таким образом, вы можете легко подключиться к изменениям данных, поэтому вы обновляете ваш localStorage только при изменении данных .

. Вы можете реализовать это с помощью пользовательской функции Vue или шины,но проще всего это сделать с помощью vuex.