将Vuex状态发送到后台

问题描述 投票:-1回答:1

我试图在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})
}
vue.js vuejs2 vuex
1个回答
-1
投票

我在问题中没有提到这一点,但我有一个值在 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 方法调用!

希望有人觉得有帮助。

© www.soinside.com 2019 - 2024. All rights reserved.