Как тут лучше сделать общие данные?

Question

[kristine-bladvin]

Есть приложение 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 методе).

Comments

[Aetae]

Реактивность должна прекрасно работать без всяких извращений.(вообще использовать секцию computed из options api одновременно с setup из composition api - нельзя)

[Aetae]

Вот на коленке накидал пример: play.vuejs.org.

Без provide\inject точно также ты можешь работать со стором(рекомендован Pinia).

Проблемы у тебя могут возникнуть только если ты пытаешься что-то через заднй проход делать. Vue максимально прост и интуитивен. Тебе не нужны никакие set-чего-то, get-чего-то, ты просто устанавливаешь значение и оно просто устанавливается.

[kristine-bladvin]

Aetae, Я попробовал для фильтра работает, спасибо что сделал пример. Я провайдил еще функцию изменения данных, а ее можно было расположить в другом компоненте. Я попробую опять написать класс со всем этим.
Но мне все равно приходиться использовать вот это:

computed: {
    filterData: {
      cache: false,
      get() {
        if (this !== undefined)
          if (this.common["filterData"]) {
            return this.common["filterData"];
          }


        return [];
      }
    }
  },

Когда приложение запускается первый раз сразу делает axios запрос, и по этому первый раз пусто. Реактивность не работает, а ключом не передать inject/provide данные.

[Aetae]

kristine-bladvin, блин просто по умолчанию делай reactive({}) как я тебе показал, а не жди ответа от сервера.
Потом когда придёт ответ - запихивай его в поле, а не заменяй весь объект, и всё будет нормально. Не нужен тебе(и никому) этот ужас с кривым computed.

Если не получается - сделай минимальный пример там же в песочнице(замени запросы на setTimeout если надо имитировать задержку).

Сложно понять в чём у тебя проблемы, но попробую погадать: если ты хочешь получить одно реактивное поле из reactive-объекта - это делается так:

const filterData = toRef(common, 'filterData'); // реактивный filterData

Если ты делал так:
const filterData = common.filterData;
Естественно ни о какой реактивности речи не может идти, т.к. тут ты получаешь конкретное значение на конкретный момент времени, об этом в самых первых уроках vue говорят.

[kristine-bladvin]

ок спасибо, попробую еще пину интегрировать