从 vuex 商店排序数组（无限渲染警告）

Question

我正在从 vuex 存储中检索一组对象，并且我试图在我的一个组件中对该数组进行排序（我不想在存储中对数组进行排序）。但是我的infinite update loop in a component render function浏览器出现错误。这里发生了什么，我该如何解决？

<template>
  <div
    v-for="(item, i) in itemList">
    {{item.description}}
  </div>
</template>


computed: Object.assign({},
  mapGetters({
    currentItemList: "item/current",
  }),
  {
   itemList() {
     if(this.currentItemList != undefined) {
       return this.currentItemList.sort(function(a, b) {
           var textA = a.description.toUpperCase()
           var textB = b.description.toUpperCase()
           return (textA < textB) ? -1 : (textA > textB) ? 1 : 0
         })
      }
      else {
        return []
      }
    },
  }
)

Answer 1

随着this.currentItemList.sort您正在改变计算属性中的反应性数据 - 这将触发组件始终重新渲染......不要改变计算属性中的数据。相反，请确保对数组的副本进行排序：this.currentItemList.slice().sort(...)

Answer 2

sort将改变数组到位。您可以在组件中创建项目列表的本地副本，然后对副本进行排序以避免副作用：

itemList() {
  if(this.currentItemList != undefined) {
    var localItemList = JSON.parse(JSON.stringify(this.currentItemList))
    return localItemList.sort(...)