Элегантно решить проблему потери состояния Vuex

Vuex
Элегантно решить проблему потери состояния Vuex

воспроизведение сцены

Я считаю, что многие друзья используютVuexПри хранении данных состояния мы столкнулись с такой неловкой ситуацией:

Когда браузер не обновляется, не откатывается или не перенаправляется,Vuexвсе нормально;

При выполнении обновления, отката и пересылки (далее именуемой операцией Sao) обнаруживается, чтоVuexСохраненное значение состояния стало начальное значение!

о ~ нет ~ 😫 Это не тот эффект, который я хочу! !

Трудно получить отAPIБазовые данные, которые я принес, исчезли ~ Я вернусь к тому, что было до освобождения!

причина

Прежде чем решить проблему, давайте сначала посмотрим, почему это происходит?

VuexЭто js проект, и данные хранятся в памяти, при выполнении операции это сделаетVuexПерезагрузите, в результате чего все данные будут восстановлены до исходного значения!

Решения

VuexПоскольку он будет потерян при выполнении этих непристойных операций, можно ли рассмотреть возможность использованияlocalStorage,sessionStorageчетноеCookieв постоянное хранилищеVuexШерстяная ткань?

Конечно, да!

Давайте перейдемОфициальный сайт Векс, можно увидетьVuexПредоставляет очень удобную функцию плагина, чтобы помочь нам удовлетворить этот спрос ~

Не говори глупостей, просто иди к коду~

// @/store/plugins/createPersistedPlugin.js
export default function createPersistedPlugin(options = { key: 'store' }) {
    return store => {
        // 1. 判断`sessionStorage`中是否有`Vuex`快照
        let sessionStore = JSON.parse(sessionStorage.getItem(options.key))
        // 若无，则使用初始值, 否则使用快照的值
        sessionStore && store.replaceState(sessionStore)
        // 临时工，用完就解雇了～
        sessionStore = null
        // 2. 监听`Vuex`中`mutation`的变化
        store.subscribe((mutation, state) => {
            // 3. 动态存储`Vuex`快照至`sessionStorage`中
            sessionStorage.setItem(options.key, JSON.stringify(state))
        })
    }
}

Инструкции:

// @/store/index.js
import createPersistedPlugin from './plugins/createPersistedPlugin.js'
const persistedPlugin = createPersistedPlugin()

const store = new Vuex.Store({
  state,
  // 其他代码
  mutations,
  plugins: [persistedPlugin]
})

На данный момент вам не нужно беспокоиться о грубой работе тестера~😄

Суммировать

Приведенный выше код также бросает кирпичи 引 玉 ~ Здесь больше места для совершенства, например:

  • БудуsessionStorageочищенный доoptions, вы можете использовать соответствующие постоянные объекты в соответствии с различными бизнес-сценариями, такими какlocalStorage
  • существуетoptionsплюс одинexpiresсрок годности, вexpiresВнутренне эффективен, делая функцию более детализированной
  • Добавить кinclude,excludeполе, пустьstateСнимки при желании можно заменить
  • and so on...
  • если у тебя лучшеidea, добро пожаловать, чтобы оставить сообщение~

Это мой первый пост в блоге, пожалуйста, дайте мне несколько советов, если я не умею писать! Просто выплюнуть~

Спасибо! ☕️～

Категории