Vue 스크립트 설정에서 반응형 객체 구조 파괴

Question

Vue 3 문서를 따라 <script setup> 태그를 사용하여 구성 요소 코드를 단순화하는 방법을 배우고 있습니다.

이 설정을 사용하면 더 이상 객체를 명시적으로 반환하기 위해 내보내기 기본 상용구를 사용할 필요가 없다는 이점 중 하나가 됩니다. 최상위 범위에 선언된 모든 항목은 자동으로 템플릿에서 사용할 수 있습니다.

내가 겪고 있는 문제는 내 앱에 초기 상태로 매우 큰 개체가 있다는 것입니다. 일반 Vue 3 앱에서는 해당 개체를 반환하고 다음과 같이 자동으로 구조를 해제할 수 있습니다.

으아아아

이렇게 하면 객체의 각 항목을 자체 ref()로 선언할 필요가 없어 상용구가 제거됩니다.

제 질문은 최상위 선언만 감지하는 Vue 모드에서 동일한 자동 구조화를 어떻게 달성할 수 있느냐는 것입니다. state.foo 또는 state.bar를 사용하지 않고 객체의 키를 직접 참조할 수 있기를 원하지만

에서 사용할 수 있도록 각 키를 const로 명시적으로 선언할 필요도 없습니다.

<script>
    import { reactive, toRefs } from 'vue'

    export default {
        setup() {
            const state = reactive({
                foo: 1,
                bar: 2,
                // the rest of a very large object
            })
            
            return toRefs(state) 
        }
    }
</script>

Answer 1

지금처럼 객체의 구조를 해제하고 스프레드 연산자를 사용하여 나머지 객체 키와 값을 저장할 수 있습니다.

으아악

foo와 bar를 제외한 모든 키는 나머지 변수에 액세스하여 액세스할 수 있습니다. 좋아요 rest.test

이것이 당신이 원하는 것이 아니라면 당신이 하려는 일은 불가능하다고 생각합니다.

제가 원하는 답변이 아닌 경우 다음 문서를 참조하세요. ES6에서 동적으로 명명된 변수로 구조를 분해하는 방법은 무엇입니까?