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

Question

[tehnazavr]

У меня стоит задача, чтобы определённый стейт не обнулялся при перезагрузке страницы. Я решил для этого использовать 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)
      }
    })
  ]
})

Answer 1

[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 собираетесь использовать, он является хранилищем по умолчанию.

Comments

[tehnazavr]

Т.е. плагин сам смотрит за state'ом, который ему укажут. И если к этому стейту применится какая-то мутация, то и local storage автоматически изменится?
Я правильно делаю в моем случае? Есть модуль а данными пользователя, и я пытаюсь эти данные загнать в storage.

const store = new Vuex.Store({
	modules:{
		credentials, ...
	},
	plugins: [createPersistedState({
		storage:{
			paths:['credentials']
		}
	})]
})

[0xD34F]

tehnazavr, нет, не правильно. Делайте так:

plugins: [createPersistedState({
  paths:['credentials']
})]

[tehnazavr]

0xD34F, Спасибо, всё заработало, теперь можно перезагружать spa. А если нужно, чтобы данные удалялись через какое-то время, то тут уже надо юзать пример, приведенный в доках?

[0xD34F]

tehnazavr, ага.