Есть приложение vue реализующие функции каталога. Такой структуры.
<template>
<Catalog></Catalog>
<Filter></Filter>
<Pagination></Pagination>
</template>
Каждый из этих компонентов может делать запрос апи и придет ОБЩИЙ массив с данными для каждого компонента. Это происходит при нажатии на следующую страницу в компоненте Pagination, при нажатии на кнопку применить фильтр в компоненте Filter и.т.д.
Я сделал через inject/provide но это очень ужасно выглядит. В каждое тело компонента необходимо помещать подобного вида действия:
setup() {
let storedData = inject('marker');
if (!storedData)
storedData = {};
return {
storedData: storedData
}
},
computed: {
params: {
cache: false,
get() {
if (this !== undefined)
if (this.storedData["filter"]) {
return this.storedData["filter"];
}
return [];
}
}
},
Секция computed нужна чтобы работала хоть как-то реактивность. И запросы не кэшировались.
Как можно сделать по другому? Может мне не нужно использовать inject/provide, а что-то другое. Потому что мне уже советовали сделать файл store.js, но он просто выдает переменные, будет такой же мусор и бардак.
Мне хочется более унифицированного, помещенного в один модуль решения, некий интерфейс. Чтобы я, когда получал данные по апи вызывал просто ApiBus.setDataField('filter', response.filter), а в теле компонента приемника ApiBus.getDataField('filter', response.filter) и все. Я пытался реализовать данный класс но методы inject/provide не работают в методах класса(хоть и вызывались в setup методе).