Где я должен поместить динамический и реактивный параметр - в Vue Computed или Vue Store?

Question

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ

У меня есть хранилище vuex, которое хранит некоторые данные.Например -> магазины и topCategories
В topCategories у меня есть выбор с топ-продуктов в магазине, как это

{ '1' : {name: 'Banana', category: 'Fruits', 'sales': 50}, {name: 'Apple', category: 'Fruits', 'sales': 50} } где '1' это идентификатор магазина

И для каждогоВ магазине у нас одинаковая структура topProducts dict.

У меня есть компонент, отображающий topProducts для выбранного магазина, и компонент должен отображать топ-продукты без дубликатов.Он должен подвести итог, если названия продуктов равны.

ВОПРОС
Где я должен поместить эту логику?В 'computed' в компоненте view или в vuex store action?

Answer 1

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

{ '1' : 
     {name: 'Apple', category: 'Fruits', 'sales': 50}, 
     {name: 'Apple', category: 'Fruits', 'sales': 50}
}

По принципу магазин служит единственным источником истины, который позволяет легко найти конкретный кусок состояния. Это неявно означает, что не рекомендуется создавать дубликаты записей в состоянии магазина. Вы должны сохранить данные перед сохранением в хранилище. Соблюдение этого принципа дизайна не позволит вам решать подобные вопросы.

Answer 2

Вам нужно будет сохранить данные в vuex, а затем получить доступ к получателям в вычисленном методе:

computed: {
  ...mapGetters(['topProducts'])
}

В ваших добытчиках:

topProducts: state => state.topProducts

Подводя итог, вам нужно действие, которое совершит мутацию. Или даже вы можете использовать добытчики. Вот пример:

computed: {
   ...mapGetters([
     'summingA',
     'summingB'
   ]),
   getTotal() {
    return this.summingA + this.summingB
   }
}

В ваших добытчиках:

summingA: state => state.summingA,
summingB: state => state.summingB