将 Vuex 状态发送到后端答案

【问题标题】：Sending Vuex State To Backend将 Vuex 状态发送到后端
【发布时间】：2020-10-01 18:54:17
【问题描述】：

我试图在 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 post 方法调用：

SET_ITEMS: (state) => {
    const items = state.items;
    axios.post('http://localhost:5000/api/boards/update-list', { list: items });
}

我尝试了多种方法，其中之一是使用扁平化包 (Flatted)，但无济于事。我该如何解决这个错误？提前致谢。

编辑就我而言，我手动为 state.items 赋值。

第二次编辑 将异步调用移动到操作中：

setItems: ({state}) => {
    axios.post('http://localhost:5000/api/boards/update-list', { hey: state.items})
}

【问题讨论】：

@Phil 我 console.log state.items 我得到了 {ob: Observer}。我还将异步调用移动到一个操作而不是突变。
@Phil 我对我的帖子进行了编辑。 state.items 是手动设置的。
@Phil 是的，我没有改变 state.items 的突变。是的，我已将异步调用付诸行动。我做了一些测试，发现将{ list: items } 更改为{ list: [ {} ] }（似乎与state.items 没有什么不同）不会引发错误。此外，记录state.items 给出[__ob__: Observer]，记录[{}] 给出[{...}]。我不知道该更新我的问题。
@Phil 我已经编辑了帖子以显示我目前的行动。
我无法重现这个问题~jsfiddle.net/Lsbkd6qh/2。一定还有其他你没有展示的东西。你对 Axios 的响应做些什么吗？在我看来，错误消息实际上是在尝试对 Vue 实例/组件进行字符串化，而不是对商店中的数组进行字符串化。我怀疑你在某个地方用别的东西覆盖了store.items

标签： vue.js vuejs2 vuex

【解决方案1】：

我没有在问题中提到这一点，但我在 state.items 中有一个值，其中存储了元素 (HTMLElement)。这导致了问题中提到的错误。我解决这个问题的方法是完成从JSON.stringify 中省略element 值。你可以通过创建一个替换函数来实现这一点，在我的例子中是这样的：

function replacer(key, value) {
    if (key === 'element') return undefined;
    return value;
}

然后你可以把这个函数放在 JSON.stringify 中，如下所示：

JSON.stringify(state.items, replacer(key, value))

现在element 值不包含在JSON.stringify 方法调用之后！

我希望有人觉得这很有帮助。

【讨论】：