從Vuex更新數據在觀察者中獲得無限循環

我有一個「傻瓜」組件，只是從父項中獲取道具。用戶可以更改啓動動作的選擇器（使用Vuex）以獲取新數據。當接收到這個新數據時，我想將它傳遞給孩子並用新數據重新渲染該組件。不幸的是，我不斷收到警告。請幫助：slight_smile：從Vuex更新數據在觀察者中獲得無限循環

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 ，但似乎無法得到它的工作...嗯

來源

2017-06-05 Dryden Williams

這可能是你在'refreshSomethingAwesome'中做的事情，但很難說清楚。你在這裏做的事情不會造成這種情況。 –

雖然，通過查看此代碼進行猜測，您可能會將其變成簡單的計算屬性。我敢打賭，無限循環是因爲你在做'this.awesomeData.sort/foo/somethingDestrutive（）'這樣的事情，而不是從它的副本中去做。 –

找到我得到循環的原因是因爲我實際上試圖從屬性中排序可變數據（以爲它是不可變的）

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

來源

2017-06-06 09:12:53

從Vuex更新數據在觀察者中獲得無限循環

回答

相關問題