我在 vuex 商店中使用 Vue.js。我调用一个 API 方法来验证一个项目,该方法返回一个错误数组和一个警告数组。
我的 vuex Action :
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')
})
}
如您所见,我还没有对响应做太多处理。 vuex 存储中调用的 setItemReviewsErrors
突变:
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
是我的 vuex validateitemReview()
操作中的以下行:
commit('setItemReviewsErrors', 'teststring')
如果我评论它,就不会再有错误了。当问题似乎来自于提交一个简单的字符串时,我不知道我的“循环结构”在哪里。
更好的是,为什么:
- 来自
setItemReviewsErrors
突变的我的console.log()
仍然被打印出来并且错误出现,即使错误似乎是在调用此方法时 - 如果我重新加载页面(在浏览器中按 Ctrl+R),没有错误,但如果我离开它(转到另一个页面)然后返回到该页面,则会再次抛出错误。
更新
问题似乎来自插件 vuex-persistedstate
。我发现这个应用程序的 vuex store 正在使用它。我不是唯一遇到这个问题的人:
https://github.com/robinvdvleuten/vuex-persistedstate/issues/152
https://github.com/robinvdvleuten/vuex-persistedstate/issues/41
但是开发人员只是关闭了工单。如果有人有解决该问题的线索,我将不允许删除持久性插件。
最佳答案
查看此备用库,vuex-persist , 他们迎面遇到了这个问题
If you have circular structures in your state
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() and JSON.stringify() will not work.
You'll need to install circular-json
npm install circular-json
And when constructing the store, add supportCircular flag
new VuexPersistence({
supportCircular: true,
...
})
但是,状态中的循环引用可能会给您带来其他问题,如果在某个阶段 react 性属性触发了对同一突变的另一个调用。也就是说,您可能很快就会发现问题是超出最大调用堆栈大小 错误。
参见 comment by Linus Borg在这段代码上
mutations:
saveVideoComment(state, {id, text, videoId}) {
let comment = {
id: id,
videoId: videoId,
text: text,
inlineUserVideo: state.userVideos[userVideoId]
};
Vue.set(state.videoComments, id, comment);
state.videos[videoId].comments.push(id);
state.videos[videoId].inlineComments.push(comment);
}
关于javascript - Vuex 提交 : JSON circular structure error,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53579428/