如何正确使用Vuex getters实现数组排序及子组件参数异常排查

你遇到的props不更新问题完全是v-for绑定的key使用数组索引导致的：
你在getters中对购物车数组按时间倒序排序，新推入的、时间更大的{prod_id: 2}元素会排在数组的第一个位置。此时Vue渲染列表时，发现索引0对应的key还是0，会直接复用原来渲染prod_id=1的Details组件实例，不会触发组件更新，因此组件拿到的props还是旧值。

将v-for的key替换为业务唯一标识prod_id即可，修正后的模板代码如下：

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

• 只要数组会涉及排序、插入、删除等改变元素位置的操作，禁止使用数组索引作为v-for的key，否则必然会出现组件复用异常、状态错乱、props不更新等问题。
• 确认你模板中调用的getter名称和Vuex中定义的一致：你需求中提到的getter名称是myCartItems，但代码里定义的是cartItems，如果存在命名不匹配也要同步修正。
• 你当前getter中先用slice()复制数组再排序的写法是正确的，不会意外修改state中的原始数据，无需调整。

内容的提问来源于stack exchange，提问作者code.cycling