Memusnahkan objek reaktif dalam tetapan skrip Vue

Question

Saya mengikuti dokumentasi Vue 3 untuk mengetahui cara beralih menggunakan teg <script setup> untuk memudahkan kod komponen saya.

Salah satu faedah menggunakan persediaan ini ialah anda tidak perlu lagi menggunakan pelat dandang lalai eksport untuk mengembalikan objek secara eksplisit: apa-apa yang diisytiharkan dalam skop peringkat atas akan tersedia secara automatik dalam templat.

Masalah yang saya hadapi ialah dalam apl saya, saya mempunyai objek yang sangat besar sebagai keadaan awal saya, dalam apl Vue 3 biasa saya, saya boleh mengembalikan objek itu dan secara automatik memusnahkannya seperti ini :

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

Ini menyelamatkan saya daripada perlu mengisytiharkan setiap item dalam objek sebagai ref() sendiri, sekali gus mengeluarkan boilerplate.

Soalan saya ialah, bagaimana saya boleh mencapai pemusnahan automatik yang sama dalam mod Vue, yang hanya mengesan pengisytiharan peringkat atasan? Saya ingin dapat merujuk kekunci objek secara langsung tanpa perlu menggunakan state.foo atau state.bar, tetapi tanpa perlu mengisytiharkan setiap kekunci secara eksplisit sebagai const untuk menjadikannya tersedia dalam

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

    const state = reactive({
                foo: 1,
                bar: 2,
                // the rest of a very large object
            })

    const { foo, bar, ? } = toRefs(state) // how do I destructure this dynamically? 
</script>

Answer 1

Anda boleh memusnahkan objek seperti yang anda lakukan sekarang dan menyimpan kekunci dan nilai objek yang selebihnya menggunakan operator spread.

sssccc

Setiap kekunci kecuali foo dan bar boleh diakses dengan mengakses pembolehubah yang tinggal. Suka rest.test

Jika ini bukan yang anda mahu, saya tidak fikir apa yang anda cuba lakukan adalah mungkin.

Jika jawapan saya bukan yang anda mahukan, sila rujuk artikel ini: Bagaimana untuk memusnahkan pembolehubah dinamakan secara dinamik dalam ES6?