4

I'm following the Vue 3 documents on how to move to using the <script setup> tags to simplify my component code.

One of the perks of using this setup is that you no longer have to use the export default boilerplate to explicitly return an object: anything declared on the top level scope will be automagically available in templates.

The issue I have is that in my app I have a very large object as my initial state, which in my normal Vue 3 app I can return and have automatically destructured, like this:

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

This saves me having to declare each and every item in the object as its own ref(), removing boilerplate.

My question is, how can I achieve the same auto-destructuring in the mode of Vue, where it only detects top level declarations? I want to be able to reference the keys of the object directly, without having to use state.foo or state.bar, but not have to explicitly declare every single one as a const in order to make it available in the

<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>
2
  • 1
    I don't think this is possible... Commented Mar 24, 2022 at 7:05
  • 1
    script setup seems to cover 90% use cases. This one isn't one of them Commented Mar 24, 2022 at 7:47

2 Answers 2

3

You can destructure your object like you are doing and save the rest of the object keys and values with the spread operator.

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

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

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

Every key but foo and bar can be reached by accessing the rest variable. Like rest.test

If this isn't what you're after, I don't think what you're trying to do is possible.

See this post if my answer wasn't what you're looking for: How to destructure into dynamically named variables in ES6?

1
  • Thanks: having done a lot of reading I also think its impossible.
    – Ucinorn
    Commented Mar 29, 2022 at 0:27
-1

One of the ways this can be tackled is by using "VueUse - toRef" instead "vue - toRef". So after destructuring enclose the destructured object in toRef(). VueUse is widely used trustworthy lib.

<script setup>
import { reactive} from 'vue'
import { toRef } from '@vueuse/core'

const state = reactive({
            foo: 1,
            bar: 2,
        })

const { foo, bar } = state
// Now foo is NON-reactive

const foo2 = toRef(foo)  // Reactive again due to VueUse

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.