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')
  })
}

如您所见，我对响应的处理还不多。 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')

如果我对此进行评论，不会再有错误。当问题似乎来自提交简单的字符串时，我不知道我的“圆形结构”在哪里。

更好，为什么：

我的console.log()突变中的setItemReviewsErrors仍被打印，并且即使在调用此方法时出现错误，该错误也会出现
如果我重新加载页面（浏览器中为Ctrl + R），则没有错误，但是如果我离开页面（转到另一页面），然后又返回到页面，则会再次引发错误。

更新

问题似乎来自插件vuex-persistedstate。我发现此应用程序的vuex存储正在使用它。我并不孤单：

但是开发者只是关闭了门票。如果有人可以解决这个问题，则不允许删除持久性插件。

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

在构建商店时，添加supportCircular标志

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

但是，如果某个状态的反应性属性触发另一个调用同一突变的状态，则处于状态的循环引用可能还会引起其他问题。就是说，您可能会由于最大调用堆栈大小超出错误而很快看到问题。

有关此代码，请参见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);
}

Vuex commit：JSON循环结构错误

更新

1 个答案: