Vuex에서 데이터를 업데이트하는 중 감시자에서 무한 루프 가져오기

Vuex에서 데이터를 업데이트하는 중 감시자에서 무한 루프 가져오기

저는 "멍청한" 구성 요소를 가지고 있는데, 이는 부모님으로부터 소품을 받는 것입니다.사용자는 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 예제이지만 작동할 수 없는 것 같습니다.흠

루프를 받은 이유는 실제로 속성에서 변동 가능한 데이터를 정렬하려고 했기 때문이라는 것을 알게 되었습니다(변경할 수 없는 데이터라고 생각했습니다).

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([])
})

도움이 되는 기사: 악어.이오

언급URL : https://stackoverflow.com/questions/44369370/updating-data-from-vuex-get-a-infinite-loop-in-watcher