I am using Vue.js with the vuex store. I call an API method to validate an item, the method returns an array of errors and an array of warnings.

My vuex action :

export function validateitemReview ({ mit, 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)
    mit('setItemReviewsErrors', 'teststring')
  })
}

As you can see, i'm not doing much with the response yet. The called setItemReviewsErrors mutation in the vuex store :

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

Here es my problem, my console output is the following :

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

directly followed by this error :

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 Storemit (vuex.esm.js?2f62:392)
    at Store.boundCommit [as mit] (vuex.esm.js?2f62:335)
    at localmit (vuex.esm.js?2f62:651)
    at eval (itemreview_actions.js?0d87:62)

itemreview_actions.js?0d87:62 is the following line in my vuex validateitemReview() action:

mit('setItemReviewsErrors', 'teststring')

if I ment it, no more error. I can't figure where could be my "circular structure" when the problems seems to e from mitting a simple string.

Even better, why:

• my console.log() from the setItemReviewsErrors mutation is still printed and the error es after even though the error seems to be while calling this method
• If I reload the page (Ctrl+R in browser), there are no errors but if I leave it (go to another page) and then e back to it, the error is thrown again.

Update

The problem seems to e from the plugin vuex-persistedstate . I found out that the vuex store of this application is using it. I am not alone with this problem :

But the dev just closes the tickets. If anyone has a lead to solve that, I am not allowed to remove the persistence plugin.

I am using Vue.js with the vuex store. I call an API method to validate an item, the method returns an array of errors and an array of warnings.

My vuex action :

export function validateitemReview ({ mit, 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)
    mit('setItemReviewsErrors', 'teststring')
  })
}

As you can see, i'm not doing much with the response yet. The called setItemReviewsErrors mutation in the vuex store :

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

Here es my problem, my console output is the following :

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

directly followed by this error :

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.mit (vuex.esm.js?2f62:392)
    at Store.boundCommit [as mit] (vuex.esm.js?2f62:335)
    at local.mit (vuex.esm.js?2f62:651)
    at eval (itemreview_actions.js?0d87:62)

itemreview_actions.js?0d87:62 is the following line in my vuex validateitemReview() action:

mit('setItemReviewsErrors', 'teststring')

if I ment it, no more error. I can't figure where could be my "circular structure" when the problems seems to e from mitting a simple string.

Even better, why:

• my console.log() from the setItemReviewsErrors mutation is still printed and the error es after even though the error seems to be while calling this method
• If I reload the page (Ctrl+R in browser), there are no errors but if I leave it (go to another page) and then e back to it, the error is thrown again.

Update

The problem seems to e from the plugin vuex-persistedstate . I found out that the vuex store of this application is using it. I am not alone with this problem :

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

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

But the dev just closes the tickets. If anyone has a lead to solve that, I am not allowed to remove the persistence plugin.

• javascript
• vue.js
• vuejs2
• vuex

• Use a parser that supports circular json. github./WebReflection/flatted – Brian Lee Commented Dec 2, 2018 at 10:40
• this could be a workaround but there is no reason JSON thinks there is a circular structure here, so i'd like to solve that first – Tom Commented Dec 2, 2018 at 10:43
• a JSON is a string. how can it contain a circular reference? – Nina Scholz Commented Dec 2, 2018 at 10:49
• 1 @Tom I had exactly the same problem using this plugin (github./robinvdvleuten/vuex-persistedstate/issues/…) My code work well without this plugin but fail to convert my JSON when it's enabled. I just remove it from my dependencies and rework a little my code to have the same behavior. The dev seem to close all the issues about this error but I think their is a problem inside the plugin code. – Jérôme Commented Dec 2, 2018 at 15:01
• 1 If you want I can explain to you how I made it to work. But it depend of your needs (and if you have the same need as me) but it not related with this question. – Jérôme Commented Dec 2, 2018 at 15:08

1 Answer 1

See this alternate library, vuex-persist, they meet this problem head-on

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,
  ...
})

However, a circular reference in state may cause you other problems, if at some stage a reactive property triggers another call to the same mutation. That said, you would likely see the problem quickly as a Maximum call stack size exceeded error.

See the ment by Linus Borg on this code

mutations:
saveVideoComment(state, {id, text, videoId}) {
    let ment = {
        id: id,
        videoId: videoId,
        text: text,
        inlineUserVideo: state.userVideos[userVideoId]
    };
    Vue.set(state.videoComments, id, ment);
    state.videos[videoId].ments.push(id);
    state.videos[videoId].inlineComments.push(ment);
}