ned4ded

Добрый день.

Не плохо для учебного проекта, я считаю. Сколько у вас опыт программирования в целом и веб-разработки в частности?

Есть несколько элементов, которые я бы сделал по-другому во vue:
1) Использовал бы vuex. event-bus полезен в некоторых местах (чтобы не засорять стор, например), но для работы со сколько-нибудь сложным апи (эмуляцией которого является ваша папка data) он просто необходим. Ну и вместе с ним переработал бы структуру проекта (с использованием модулей, более удобного структурирования компонентов и т.п.). Ну что вот это такое "search-overlay-active-notify-dark-backgr-in-header"?
3) Поправил бы некоторые орфографические ошибки: stor, imgAndHerInstancesSizes, сont
4) Не стал бы пересылать в props объект data. Во первых, можно запутаться. Во вторых, данные должны быть как можно более плоскими.
5) Не стал бы засовывать в computed свойство сеттер, который обладает достаточно сложной логикой. Для исполнения такой логики есть методы. Вообще computed свойства должны быть максимально простыми. Не нужно в них пихать асинхронные импорты, это уже перебор.
6) Не стал бы использовать localstorage для хранения промежуточных вычислений. В конце концов, для управления состоянием существует vuex.
7) Не стал бы усложнять логику рендера TheCartNotEmpty, почему просто не сделать ее через if?
8) Не стал бы изменять DOM напрямую. Когда вы ищите элементы в вашем spa через document.querySelector, то у вас явно проблемы с проектированием )
9) Переименовал бы компоненты согласно одной из принятых конвенций. Что за TheNews, RptNewsItem? NewsComponent, NewsItemComponent. Не говорю уже о TheContainer, TheActions, название которых не несет никакого смысла.
10) Избавился бы от string templates. Сделайте их отдельным компонентом.

В целом по js:
1) Избавился бы от вложенных if.
2) Не использовал бы оператор delete для удаления свойств у объекта.

Ну, можете считать часть этих замечаний делом вкуса, "opinionated" как написали бы наши забугорные коллеги, но может быть вы сможете вынести что-то полезное для себя )

ps, не стал смотреть доскональна все, проверил 5-6 файлов.

Добрый день!

Согласно официальному стайлгайду, стоит избегать использования любого управления состоянием, кроме как через vuex.

Если по порядку, то я знаю два паттерна, которые позволят решить проблему коммуникаций компонентов вью: flux design pattern (реализованное с помощью библиотеки vuex), и event bus.

То, что пытаетесь сделать вы, - это event bus, только вместо использования отдельного экземпляра вью вы в качестве шины используете рутовый экземпляр (по крайней мере в первой части кода).

Если нет желания разбираться во vuex, то попробуйте организовать работу через шину, оно подойдет для обоих перечисленных вами случаев.

Event bus для вью основан на встроенных во вью кастомных событиях (реализованных через vm.$on и vm.$emit, подробнее). Обычно создается еще один экземпляр вью:

// Дальше идет псевдокод, возможны синтаксические ошибки.

// event-bus.js
import Vue from 'vue'

export default new Vue()

// app.js
import Vue from 'vue'
import bus from './event-bus'

export default new Vue({
  created() {
     bus.$on('some-event', () => { console.log('hi!') })
  },

  components: {
    child: {
      methods: {
        triggerSomeEvent() {
          bus.$emit('some-event')
        }
      }
    }
  }
})

Эту шину импортируете в те компоненты, которые подвязаны на события, инициализируемые в этой шине (т.е. и отправитель и получатель события), здесь будет не важно, родитель это, ребенок, потомок или независимый компонент.

Добрый день!

В общих чертах: фильтруемые данные должны быть иммутабельны (что немного против философии vue). Следовательно, вы в модуле, через который делаете апи колл на получение данных, пишите геттеры на разные "срезы" этого массива.

Ps
Возможно, вам стоит сразу после получения ответа нормализовать данные: разбить на flatten массивы, преобразовать массивы в объект с ключами - айдишниками; иначе если у вас тяжеловесный массив на 10к+ ("огромность" такого массива может не сильно влиять на производительность, все зависит от многих факторов, но у меня такие просадки появились в тот момент, когда я начал обрабатывать порядка 50к плоских объектов) объектов с огромным количеством полей, то все это может начать тормозить, особенно если у вас частые обновления дома, связанные с этим массивом.

+ помните, что после добавления в стор все объекты оборачиваются в специальные vue-конструкции, которые позволяют сделать данные реактивными, в связи с чем может быть сильная просадка производительности при загрузки в стор без асинхронных чанков.

Возможно, вам пригодится https://github.com/vuex-orm/vuex-orm, особенно если массив имеет несколько повторяющихся сущностней.

ps2 300 объектов - это не огромный массив ;) вам вполне подойдет все, что описано "в общих чертах", оптимизация вряд ли понадобится.