TypeError: Converting circular structure to JSON
エラー:
解析:
一般的なエラーエラーコード 解決 を解除することである.本のブログのエラー位置は、ループリファレンスを明示的に見ることができません.ループリファレンスのコードは自分で書いたものではなく、フレームワークコードが自分で実現したものなので、問題の発生箇所を発見するのはもっと難しいです.午後ごろになって頭が爆発しそうになり、やっと夜明けの曙光が見えた.問題の原因を発見: が存在する. が使用する.
[Vue warn]: Error in nextTick: "TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Vue'
| property '$options' -> object with constructor 'Object'
| property 'router' -> object with constructor 'VueRouter'
--- property 'app' closes the circle"
解析:
一般的なエラー
TypeError: Converting circular structure to JSONは、ループ参照が存在し、JSON.stringify法を用いて文字列に変換されるためである.簡単な例を示します.const x = { a: 8 };
const b = { x };
b.y = b; //
JSON.stringify(b); //
const x = { a: 8 };
const b = { x };
b.y = JSON.parse(JSON.stringify(b)); // ， ，
JSON.stringify(b);
vuexのステータス管理stateには、routerのインスタンス(コンポーネントで取得するthis.$route)が格納、循環参照vuexプラグインvuex-persistedstate stateには循環参照があり、プラグインvuex-persistedstateはJSON.stringifyを実行してstateのデータを文字列に変換してブラウザのローカルストレージに格納する.次に、ループリファレンスを解除し、コンポーネントで取得したthis.$routeを深くコピーしてstateに格納する方法が解決される./**
*
* @param {All} [o]
* @returns {String}
*/
export function getType(o){
return Object.prototype.toString.call(o).slice(8,-1);
}
/**
*
* @param {All} [o]
* @param {String} [type]
* @returns {Boolean}
*/
export function isKeyType(o, type) {
return getType(o).toLowerCase() === type.toLowerCase();
}
/**
* ， object Date Array
* @param {Any} sth
* @return {Any}
*/
export function deepClone(sth) {
let copy;
if (null == sth || "object" != typeof sth) return sth;
if (isKeyType(sth, 'date')) {
copy = new Date();
copy.setTime(sth.getTime());
return copy;
}
if (isKeyType(sth, 'array')) {
copy = [];
for (let i = 0, len = sth.length; i < len; i++) {
copy[i] = deepClone(sth[i]);
}
return copy;
}
if (isKeyType(sth, 'object')) {
copy = {};
for (let attr in sth) {
if (sth.hasOwnProperty(attr)) copy[attr] = deepClone(sth[attr]);
}
return copy;
}
return null;
}