我应该将动态和反应性参数放在哪里-在Vue计算或Vue存储中？

Question

免责声明

我有vuex存储，即存储一些数据。例如->商店和topCategories
在topCategories中，我已经在像这样的商店中对顶级产品进行了

{ '1' : {name: 'Banana', category: 'Fruits', 'sales': 50}, {name: 'Apple', category: 'Fruits', 'sales': 50} }，其中“ 1”是shopID

对于每个商店，我们都有相同的topProducts字典结构。

我有一个显示所选商店的topProducts的组件，该组件应显示没有重复的顶级产品。如果产品名称相同，他应该总结。

问题
我应该把这个逻辑放在哪里？在视图组件中的“计算”中还是在vuex存储操作中？

Answer 1

您将需要将数据存储在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

Answer 2

以我的拙见，您应该重新考虑一下到目前为止如何设计此方面。我的意思是，您不应该在商店中包含重复数据的情况下，例如：

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

通过principle，商店成为唯一的事实来源，这使得直接定位特定状态变得容易。这隐含地意味着在商店状态内具有重复条目不是一个好设计。您应该先存储数据，然后再将其保存到存储中。遵守这一设计原则会阻止您处理类似的问题。