javascript - 从 Vuex 更新数据在观察者中出现无限循环

Question

我有一个“愚蠢”的组件，它只是从父级获取 Prop 。用户可以更改触发操作(使用 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 Examples但似乎无法让它工作......嗯

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