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

Question

免责声明

我有 vuex 存储，它存储一些数据。例如 -> 商店和 topCategories
在 topCategories 中，我对像这样的商店中的顶级产品有 dict

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

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

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

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

Answer 1

您需要将数据存储在 vuex 中，然后在计算方法中访问 getter：

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 存储是唯一的事实来源，这使得定位特定状态变得简单。这隐含地意味着在商店的状态中有重复的条目不是一个好的设计。您应该先存储数据，然后再将其保存到存储中。遵守这一设计原则会妨碍您处理类似的问题。