从Vuex更新数据会在watcher中陷入无限循环

Question

我有一个“哑巴”组件，它只能从父母那里获得道具。 用户可以更改选择器，该选择器将触发操作（使用Vuex）以获取新数据。 收到新数据后，我想将其传递给孩子，然后用新数据重新渲染该组件。 不幸的是，我一直在观察者中收到此警告。 请帮助：slight_smile：

export default {
  name: 'bubbles',
  props: {
    awesomeData: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      title: 'Best component ever'
    }
  },
  watch: {
    awesomeData (newData) {
      console.log('hello world')
      this.refreshSomethingAwesome(newData)
    }
  },
  methods: {
    refreshSomethingAwesome (newData) {}
  }
}

s

101 hello world
[Vue warn]: You may have an infinite update loop in watcher with expression "awesomeData"

我正在尝试一个与此完全相同的解决方案： Vuex示例，但似乎无法使其正常工作... hmmm

Answer 1

发现我进入循环的原因是因为我实际上是试图从属性中排序可变数据（认为它是不可变的）

let options = {
 children: newData.sort((a, b) => a.value - b.value)
}

我将其更改为：

const sortedNewData = [...newData].sort((a, b) => a.value - b.value)

let options = {
 children: sortedNewData
}

注意：为防止在我的整个应用程序中出现这种情况，我可以将初始状态从immutable.js包装在Map中

import { Map, fromJS } from 'immutable'

const initialState = Map({
 awesomeData: fromJS([])
})

有用的文章： alligator.io