vue3的script setup语法糖中toRefs如何优雅呈现

Question

现在被迫这样写：

const state = reactive({
    time_type:'day',
    update_type:'auto', 
    day_frequency:1,
    month_frequency:1,
    date_selected:default7Days(),
    month_selected:defaultMonth(),
    indicator_list_initial:SHOP_INDICATOR,
})
const {time_type, update_type, day_frequency, month_frequency, date_selected, month_selected, indicator_list_initial} = toRefs(state)

Answer 1

在reactive里再包一层？e.g.

<template>
  <p>{{ field.time_type }}</p>
  <p>{{ field.update_type }}</p>
  <p>{{ field.day_frequency }}</p>
</template>

<script>
...
setup() {
  const state = reactive({
    field: {
      time_type:'day',
      update_type:'auto', 
      day_frequency:1,
      month_frequency:1,
      date_selected:default7Days(),
      month_selected:defaultMonth(),
      indicator_list_initial:SHOP_INDICATOR,
    }
  })
  
  return {
    ...toRefs(state)
  }
},
...
</script>

Answer 2

可能这样吧

defineExpose({
  ...toRefs(state)
})

可以看看这个https://v3.vuejs.org/api/sfc-...

Answer 3

楼主有更好的办法吗