데이터를 초기화하지만 원본을 변경하지 못하게하는 방법

Question

데이터 "설정"이 변경되면이 객체를 변경하지 말고 다른 객체 "original_settings"의 Vue 데이터 "설정"을 초기화해야합니다. 일어나는 방법?

new Vue({ 
    el: "#app", 
    data: { 
     settings: original_settings   
    } 
}); 

Answer 1

당신은 객체의 deep 복제 복사본을 만들기 위해 JSON.parse(JSON.stringify(obj))를 사용할 수 있습니다.

new Vue({ 
    el: "#app", 
    data: { 
    settings: JSON.parse(JSON.stringify(original_settings))   
    } 
}); 

또 다른 해결책은 ES6에서 Object.assign을 사용하는 것입니다.

new Vue({ 
    el: "#app", 
    data: { 
    settings: Object.assign({}, original_settings)   
    } 
}); 

Answer 2

나는 이것이 좋은 해결책이라고 생각하지 않습니다. https://vuejs.org/v2/api/#data

문서 :

는 자신의 상태 행동 물체를 관찰하는 것은 권장하지 않습니다 는 데이터에 대한 설명서를 참조하십시오. 일단 외부 개체에서 데이터를 바인딩해야하는 경우 데이터가

객체가 더 이상 루트에 반응 속성을 추가 할 수 없습니다, 관찰, 당신은 그들에 액세스하는 속성을 계산 사용하거나 (상점을 사용할 수 있습니다 VueX). 그것은 당신을 위해

var original_settings = { foo: 'var'} 

new Vue({ 
    el: '#el', 
    data: { 
    //empty 
    }, 
    computed: { 
    foo: { 
     get: function() { 
     return original_settings.foo 
     }, 
     set: function (value) { 
     original_setting.foo = value 
     } 
    } 
    } 
})