@tehnazavr

Как реализовать частичное сохранение стейта с помощью vuex-persistedstate?

У меня стоит задача, чтобы определённый стейт не обнулялся при перезагрузке страницы. Я решил для этого использовать vuex-persistedstate.

Как указать плагину какой конкретно стейт нужно синхронизировать? И можно ли из какого-нибудь экшена сказать ему, что вот сейчас нужно перезаписать/удалить что-то из localstorage?

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})
  • Вопрос задан
  • 2010 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Как указать плагину какой конкретно стейт нужно синхронизировать?

У vuex-persistedstate при создании экземпляра можно в настройках определить свойство paths, перечисляющее, какие части стейта надо сохранять.

Или можно определить метод reducer, который получает текущий стейт и возвращает стейт, который нужно сохранить.

И можно ли из какого-нибудь экшена сказать ему, что вот сейчас нужно перезаписать/удалить что-то из localstorage?

Ничего такого не нужно, обновление localStorage происходит автоматически при обновлении стейта.

Или вы хотите, чтобы сохранение стейта осуществлялось только в определённые моменты? Тогда вам поможет метод filter - получает объект, содержащий имя выполняемой мутации (да-да, мутации, а не экшена) и её payload, возвращает true/false - надо/не надо выполнять сохранение.

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы