我试图在Vuex中发送一个对象数组的状态到我的后台。然而,我一直得到这个错误。
Uncaught (in promise) TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property '$options' -> object with constructor 'Object'
| property 'router' -> object with constructor 'Object'
--- property 'app' closes the circle
at JSON.stringify (<anonymous>)
at transformRequest (defaults.js?6d1b:52)
at transform (transformData.js?e0e9:16)
at Object.forEach (utils.js?a2f8:232)
at transformData (transformData.js?e0e9:15)
at dispatchRequest (dispatchRequest.js?82e5:30)
我使用axios来发布到我的后端, 这里是我的axios发布方法调用:
SET_ITEMS: (state) => {
const items = state.items;
axios.post('http://localhost:5000/api/boards/update-list', { list: items });
}
我尝试了多种方法,其中一种是使用扁平化的包(扁平的),但是,没有用。如何解决这个错误?先谢谢你了。
编辑在我的例子中,我已经手动给state.items赋值。
state: {
items: [
{
x: 100,
y: 200,
},
{
x: 50,
y: 400,
},
{
x: 100,
y: 100,
},
{
x: 350,
y: 300,
}
]
}
第二次编辑把异步调用移到了一个动作中。
setItems: ({state}) => {
axios.post('http://localhost:5000/api/boards/update-list', { hey: state.items})
}
我在问题中没有提到这一点,但我有一个值在 state.items
元素(HTMLElement)被存储的地方。这一直导致问题中提到的错误。我是如何解决这个问题的呢,我是通过将下面的 element
值从 JSON.stringify
. 你可以通过创建一个replacer函数来实现,这里是我的案例。
function replacer(key, value) {
if (key === 'element') return undefined;
return value;
}
然后你可以把这个函数放在JSON.stringify中,如图所示。
JSON.stringify(state.items, replacer(key, value))
现在 element
值不包括在 JSON.stringify
方法调用!
希望有人觉得有帮助。