Как правильно получать настройки?

Question

[keksum666]

Задача такая:
Получаю с api настройки (состоит из ключа и значения), после сохраняю в куку (альтернатива хеширования, сохраняю на 5 минут), создал action во vuex с подгрузкой настроек

async initOptions() {
      if (!Cookies.get('options')) {
        await Option.$query().get().then(response => {
          Cookies.set('options', JSON.stringify(response.map(function (item) {
            return [item.$attributes.option_key, item.$attributes.option_value]
          })), {expires: 1/24/60*5});
        })
      }
    }

После сделал getter в виде функции который возвращает значение по ключу, если ключ не найден возвращает дефолтное значение:

getOptionByKey: () => (key, def) => {
      return (new Map(JSON.parse(Cookies.get('options'))).get(key) ?? def);
    }

Проблема в том что куки устаревает через 5 минут и его снова нужно подгружать, как это можно грамотно сделать? (делать через action который возвращает getter не вариант, не удобно получать настройки, также не вариант вызывать action в getter'e. В первый раз подгружаю в App.vue настройки, дальше они должны подгружаться если куки нет

Answer 1

[Alex]

А зачем тут Vuex? Сделайте обычную функцию, которая бы брала данные из кук или загружала по api. Примерно так:

async function getOption(key, def) {
  let options = Cookies.get('options')
  if (!options) {
   options = await Option.$query().get()
   Cookies.set('options', options)
  }

  return new Map(JSON.parse(options)).get(key) ?? def
}

Далее просто импортируйте и используйте эту функцию в нужных компонентах