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) {}
  }
}

取值

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

的地图中

import { Map, fromJS } from 'immutable'

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

有用的文章：alligator.io

从Vuex更新数据会在观察者中获得无限循环

1 个答案: