задний план
При разработке средних и крупных приложений с помощью vue мы обычно используем vuex для управления состоянием, но поскольку vuex хранит данные в памяти в виде объектов js, при обновлении страницы данные vuex в памяти будут потеряны. мы не хотим видеть такие результаты.
поднятые вопросы
Так как же реализовать персистентность vuex, чтобы он стал похож на localStorage и sessionStorag?
сделать свои собственные колеса
Общая идея не более чем хранить состояние vuex, читать кеш и регистрировать vuex во время инициализации.Подробнее смотрите следующие две схемы:
Вариант 1: написать плагин vuex
vuex предоставляетплагинфункцию, мы можем сохранить состояние в каждой мутации, сохранить его в localStorage, sessionStorage, а затем прочитать сохраненное значение состояния при инициализации страницы, перезаписав начальное значение состояния
Вариант 2. Используйте событие beforeunload
beforeunloadСобытия могут не использоваться очень часто, это не новая функция, а очень старое событие, исовместимостьОчень хорошо (IE6 совместим, можете в это поверить)
Событие beforeunload выполняется перед выгрузкой страницы. Например, обновление, возврат на другие страницы, закрытие и другие операции вызовут это событие.
Это дает нам еще одну идею кэширования: вместо того, чтобы записывать изменения каждый раз при мутации, почему бы не кэшировать состояние, которое будет кэшироваться в тот момент, когда страница выгружается, разве это не более эффективно?
На основе этого принципа я разработал плагинvue-vuex-persist
Сторонние решения
Большинство сторонних плагинов реализованы на основе плагинов vuex.
В сообществе также есть несколько хороших плагинов, таких какvuex-persistedstate