如何将过滤器计算属性应用于 Vuex 的 mapState 中的计算属性？答案

【问题标题】：How to apply a filter computed property to a computed property inside Vuex's mapState?如何将过滤器计算属性应用于 Vuex 的 mapState 中的计算属性？
【发布时间】：2020-04-18 21:05:45
【问题描述】：

我有一个正确呈现到 DOM 中的货物列表。这样一个出货数组在组件内部是这样定义的：

computed: mapState([
    'shipments'
])

现在我想根据某些条件过滤数组。在将 Vuex 插入应用程序之前，我已经完美地实现了这一点。之前用于执行此操作的计算属性如下所示：

filteredShipments() {
   // Some processing

   let filtered = arr.filter(shipment => shipment.criteria);
   return filtered;
}

根据filteredShipments()过滤shipments的正确语法是什么？

【问题讨论】：

您仍然可以在模板中使用计算的 prop 过滤器来过滤 this.shipments 并返回过滤后的数组
为什么不在 vuex 本身中创建一个 getter？
@Anatoly 我收到此错误：方法“filteredShipments”未在实例上定义，但在渲染期间被引用。我正在尝试这种语法：computed: mapState([ 'shipments', ]), filteredShipments() { }

标签： vue.js redux vuex

【解决方案1】：

我明白了。这可以通过扩展运算符解决：

computed: {
   ...mapState([
      'shipments'
   ]),
   filteredShipments() { 
       // logic
   }
}

【讨论】：