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

【问题标题】：Updating data from Vuex get a infinite loop in watcher从 Vuex 更新数据在观察者中获得无限循环
【发布时间】：2017-11-06 06:03:15
【问题描述】：

我有一个“愚蠢”的组件，它只是从父母那里获得道具。用户可以更改触发动作的选择器（使用 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 但似乎无法让它工作......嗯

【问题讨论】：

这可能是您在refreshSomethingAwesome 中所做的事情，但很难说。你在这里做的事情不会导致这种情况。
不过，通过查看此代码进行猜测，您很可能会将其变成一个简单的计算属性。我敢打赌，无限循环是因为你做了类似this.awesomeData.sort/foo/somethingDestrutive() 之类的事情，而不是使用它的副本。

标签： javascript vue.js vuex

【解决方案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

【讨论】：