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

Question

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

我的目标是使用 getter myCartItems

通过 date 对作为对象数组的 cart 数据进行排序

我的问题是，在我的 Details 组件中推送第二个有效负载 {prod_id: 2, date: Wed Nov 03 2021 10:40:20} 后，道具 ['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}
}

getters

 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>

Answer 1

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

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

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

how to properly use getters when sorting array