Vuex commit : JSON 순환 구조 오류

Vuex commit : JSON 순환 구조 오류

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

보시다시피 아직 반응이 별로 없습니다.착신자setItemReviewsErrorsvuex 스토어의 변환:

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:62vuex의 다음 행입니다.validateitemReview()액션:

commit('setItemReviewsErrors', 'teststring')

제가 코멘트를 하면 더 이상 오류가 없습니다.문제가 단순한 문자열을 커밋하는 데서 비롯되는 것처럼 보일 때, 제 "원 구조"가 어디에 있는지 알 수 없습니다.

더 좋은 이유:

• 나의console.log()에서setItemReviewsErrors이 메서드를 호출하는 동안 오류가 발생한 것 같은데도 변환이 인쇄되고 오류가 발생합니다.
• 페이지를 새로고침하면(브라우저에서는 Ctrl+R), 에러는 발생하지 않지만 그대로 두었다가(다른 페이지로 이동) 다시 돌아오면 에러가 발생합니다.

갱신하다

이 문제는 플러그인이 원인인 것 같습니다.vuex-persistedstate이 어플리케이션의 vuex 스토어에서 사용하고 있는 것을 알게 되었습니다.이 문제는 저 혼자만의 문제가 아닙니다.

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

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

하지만 개발팀은 그냥 티켓을 닫아버려요.이 문제를 해결할 수 있는 단서가 있는 경우 지속성 플러그인을 제거할 수 없습니다.

이 대체 라이브러리 vuex-persist를 참조하십시오. 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,
  ...
})

다만, 상태에서의 순환 참조에 의해서, 어느 단계에서 반응하는 속성이 같은 변환에 다른 콜을 트리거 했을 경우, 다른 문제가 발생할 가능성이 있습니다.즉, Maximum call stack size exceeded 오류가 발생했기 때문에 이 문제를 바로 알 수 있습니다.

이 코드에 대한 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);
}

언급URL : https://stackoverflow.com/questions/53579428/vuex-commit-json-circular-structure-error