Option to pick a preference in how to handle primitives within data object

[CyberAP]

I would like to be able to choose on how to convert data props to reactive values. There are two methods: value and state and value is the default one now. I would like to pick state instead.

Input:

  export default {
    data() {
      return {
        visible: false,
      }
    },
  }

Current output:

import { value } from 'vue'

export default {
  setup() {
    const visible = value(false)

    return {
      visible
    }
  }
}

Output with state:

import { state } from 'vue'

export default {
  setup() {
    const data = state({ visible: false })

    return {
      ...data
    }
  }
}

[vberlier]

As far as I understand this wouldn't let you use data.visible anywhere in the setup function since in this case data is the reactive object and spreading its properties simply copies primitive values over to the returned object.

[CyberAP]

In the setup context yes, but it should be always accessed via the data object there, not from the spread. But on the render context it would be mutable and reactive, if I'm not missing something.

Here's an example by Evan: vuejs/rfcs#42 (comment)

import { state, computed as c } from 'vue'

const MyComponent = {
  template: `
    <div @click="increment">{{ count }} {{ double }}</div>
  `,
  setup() {
    const data = state({
      count: 0
    })

    const computed = {
      double: c(() => data.count * 2)
    }

    const methods = {
      increment: () => { data.count++ }
    }

    return {
      ...data,
      ...computed,
      ...methods
    }
  }
}

[Akryum]

@CyberAP If you have an object in the data, if will use state already. I'm not sure the spread in the return will work.