Error: Vuex commit fails due to JSON circular structure issue

Question

Error: Vuex commit fails due to JSON circular structure issue

Using Vue.js along with the vuex store, I make an API call to validate an item, which returns arrays of errors and warnings.

Below is my 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')
  })
}

The setItemReviewsErrors mutation in the vuex store doesn't do much with the response yet :

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

However, the issue arises when the following error occurs :

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)

Further investigation reveals that this problem may be related to the vuex-persistedstate plugin being used. Others have faced similar issues as well :

Unfortunately, the developer seems to have closed the tickets without a solution. If anyone has any insights on resolving this issue without removing the persistence plugin, please share.

javascript vue.js vuejs2 vuex

Answer 1

Answer №1

For an alternative solution, check out the library vuex-persist, which tackles this issue directly

In case you encounter circular structures within 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

Using JSON.parse() and JSON.stringify() won't resolve the problem.

You'll have to install circular-json

npm install circular-json

Furthermore, when setting up the store, ensure to include the supportCircular flag

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

It's worth noting that having a circular reference in your state could lead to other issues, especially if a reactive property triggers another call to the same mutation. In such cases, you may encounter a Maximum call stack size exceeded error promptly.

Refer to the comment made by Linus Borg regarding this code snippet

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

Answer 2

For an alternative solution, check out the library vuex-persist, which tackles this issue directly

In case you encounter circular structures within 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

Using JSON.parse() and JSON.stringify() won't resolve the problem.

You'll have to install circular-json

npm install circular-json

Furthermore, when setting up the store, ensure to include the supportCircular flag

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

It's worth noting that having a circular reference in your state could lead to other issues, especially if a reactive property triggers another call to the same mutation. In such cases, you may encounter a Maximum call stack size exceeded error promptly.

Refer to the comment made by Linus Borg regarding this code snippet

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

Error: Vuex commit fails due to JSON circular structure issue

Answer №1

Similar questions

Retrieve the Firepad textarea element or the current character being typed

Node.js Friendship NetworkIncorporating Friendships in Node

Obtain JSON data response in PHP with the help of jQuery

Should a React application perform a complete refresh when a file is reloaded?

What is the best way to merge setInterval with mouseenter events?

Guide to saving an http response as a file and automatically retrying on a 503 error

Ways to efficiently manage session control without repeating it in each route

Importing XML data into a JavaScript variable using jQuery without displaying an alert message

When implementing helmetJS into my project, I noticed that Font Awesome was displaying white squares

"Strategies for effectively utilizing the .find method to locate specific users within a database

What is the method to activate map dragging in Leaflet only while the spacebar is pressed?

Using a PHP variable to trigger the jQuery .show() function

What is the best way to modify the state of an array of objects by applying a filter in Vue 3?

Retrieve the link's "href" attribute and its text if they match the specified text

Issue: Unable to locate the "es2015" preset in relation to the given directory

Shopify module is throwing an error stating that React is not defined

Leveraging the power of React's callback ref in conjunction with a

Gain access to Google Analytics without the need for page consent by utilizing JavaScript

What is the best approach for creating a test that can simulate and manage errors during JSON parsing in a Node.js

Can a software be created to capture search results from the internet?