Destructuring reactive objects in Vue script settings
I'm following the Vue 3 documentation to see how I can move to using the <script setup> tag to simplify my component code.
One of the benefits of using this setting is that you no longer need to use the export default boilerplate to explicitly return objects: anything declared in the top-level scope will be automatically available in the template.
The problem I have is that in my application I have a very large object as my initial state, in my normal Vue 3 application I can return the object and have it automatically destructured as follows Shown:
<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 from having to declare each item in the object as its own ref(), thus removing boilerplate.
My question is, how can I achieve the same automatic destructuring in Vue mode, which only detects top-level declarations? I'd like to be able to reference the object's keys directly without having to use state.foo or state.bar, but without having to explicitly declare each key as const in order to make it available in
<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>