Vuex commit: ошибка круговой структуры JSON

Question

Я использую Vue.js с магазином vuex.Я вызываю метод 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')
  })
}

Как видите, яне очень много с ответом еще.Вызванная мутация setItemReviewsErrors в хранилище vuex:

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

, если я это прокомментирую, ошибки больше не будет.Я не могу понять, где может быть моя «круговая структура», когда проблемы возникают из-за совершения простой строки.

Еще лучше, почему:

• my console.log() fromмутация setItemReviewsErrors все еще печатается, и ошибка появляется после того, как ошибка появляется при вызове этого метода
• Если я перезагрузлю страницу (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 () не будут работать.

Вам нужно будет установить циркуляр-json

npm install circular-json

И при построении магазина добавить флажок supportCircular

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

Однако циклическая ссылка в состоянии может вызвать другие проблемы, если на каком-то этапе реактивное свойство вызывает другой вызов той же мутации.Тем не менее, вы, скорее всего, увидите проблему как: Максимальный размер стека вызовов превысил Ошибка.

См. Комментарий Линуса Борг по этому коду

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