排序数组时如何正确使用getter答案

【问题标题】：how to properly use getters when sorting array排序数组时如何正确使用getter
【发布时间】：2021-11-03 02:48:41
【问题描述】：

所以我在使用 vuex getter 时遇到了问题。

我的目标是使用getter myCartItems对date对象数组cart进行排序

我的问题是，在我的Details 组件中推送第二个有效负载{prod_id: 2, date: Wed Nov 03 2021 10:40:20} 后，props['prod_id'] 正在记录prod_id: 1 而不是prod_id: 2

变异

addToCart: (state, payload) => {
  state.cart.push(payload) // payload = {prod_id: 1, date: Wed Nov 03 2021 10:37:26}
}

吸气剂

 cartItems: (state) => {
   return state.cart.slice().sort(
      (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
    );
 },

html

  <div v-for="(item,index) in cartItems" :key="index">
       <Details :id="item.prod_id" />
  </div>

【问题讨论】：

【解决方案1】：

将索引用作key 是您的问题，因为索引永远不会根据排序顺序而改变。

最佳做法是使用唯一标识符，例如prod_id

<div v-for="item in cartItems" :key="item.prod_id">
  <Details :id="item.prod_id" />
</div>

【讨论】：