Vuex 提交：JSON 循环结构错误

Question

我在 vuex 商店中使用 Vue.js。我调用一个 API 方法来验证一个项目，该方法返回一个错误数组和一个警告数组。

我的 vuex 动作：

export function validateitemReview ({ commit, dispatch, state }, { reviewId, type, itemreviewData }) {
  console.log('*** validateItemReview() called')
  return api.post(`/clients/districts/reviews/${reviewId}/${type}/validate`, itemreviewData).then(response => {
    console.log('response.data :')
    console.log(response.data)
    commit('setItemReviewsErrors', 'teststring')
  })
}

如您所见，我还没有对响应做太多处理。setItemReviewsErrorsvuex store 中被调用的mutation：

export const setItemReviewsErrors = (state, data) => {
  console.log('*** setItemReviewsErrors() called, data:')
  console.log(data)
}

我的问题来了，我的控制台输出如下：

*** validateItemReview() called
response.data :
{
    fatal_errors: []
    warnings: []
    __proto__: Object
}
*** setItemReviewsErrors() called, data:
teststring

直接跟着这个错误：

Uncaught (in promise) TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at eval (vuex-persistedstate.es.js?0e44:1)
    at eval (vuex-persistedstate.es.js?0e44:1)
    at eval (vuex.esm.js?2f62:392)
    at Array.forEach (<anonymous>)
    at Store.commit (vuex.esm.js?2f62:392)
    at Store.boundCommit [as commit] (vuex.esm.js?2f62:335)
    at local.commit (vuex.esm.js?2f62:651)
    at eval (itemreview_actions.js?0d87:62)

itemreview_actions.js?0d87:62是我的 vuexvalidateitemReview()操作中的以下行：

commit('setItemReviewsErrors', 'teststring')

如果我评论它，就不会再有错误了。当问题似乎来自提交一个简单的字符串时，我无法弄清楚我的“圆形结构”在哪里。

更好的是，为什么：

• my console.log()from the setItemReviewsErrorsmutation 仍然被打印出来，即使错误似乎是在调用这个方法时出现的
• 如果我重新加载页面（浏览器中的 Ctrl+R），则没有错误，但是如果我离开它（转到另一个页面）然后返回它，则会再次引发错误。

更新

问题似乎来自插件vuex-persistedstate。我发现这个应用的vuex商店正在使用它。我并不孤单有这个问题：

• https://github.com/robinvdvleuten/vuex-persistedstate/issues/152

• https://github.com/robinvdvleuten/vuex-persistedstate/issues/41

但是开发人员只是关闭了门票。如果有人有解决这个问题的线索，我不允许删除持久性插件。

Answer 1

看到这个替代库vuex-persist，他们迎面解决了这个问题

如果您所在的州有圆形结构

let x = { a: 10 }  
x.x = x  
x.x === x.x.x // true  
x.x.x.a === x.x.x.x.a //true  

JSON.parse() 和 JSON.stringify() 将不起作用。

你需要安装circular-json

npm install circular-json

并且在构建 store 时，添加 supportCircular 标志

new VuexPersistence({
  supportCircular: true,
  ...
})

但是，状态中的循环引用可能会给您带来其他问题，如果在某个阶段某个反应性属性触发了对同一突变的另一个调用。也就是说，您可能会很快看到问题，因为最大调用堆栈大小超出错误。

请参阅Linus Borg对此代码的评论

let x = { a: 10 }  
x.x = x  
x.x === x.x.x // true  
x.x.x.a === x.x.x.x.a //true